CSS position: relative vs position: absolute [closed]
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this questionI'm trying to figure out how to clear or reset the relative positioning of an element on my page. I have an element with position:relative, and further down the tree a bit a dialog box div is defined along with a background image that is stretched to fill the page to make the dialog box modal.
The problem is that b/c there is a position:relative further up the DOM tree, when I say top:0, left:0 for the background image, it goes to 0,0 relative of that element rather than going to 0,0 of the page.
How can I clear or reset the relative positioning so that the absolutely positioned background image can be set to 0,0 of the page?
In most cases, your modal should be a direct child of the body.
If the modal has an ancestor with relative or absolute positioning, you cannot "undo" that short of changing the style on the offending element.
HTML:
<html>
<head>...</head>
<body>
<div id="content">content!</div>
<div id="someModal" class="modal" style="display:none"></div>
</body>
</html>
CSS:
.modal {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
We would love to see your code first, but probably you're looking nto this:
position: absolute !important;
Well, an absolutely positioned element that is set at (0,0) will ALWAYS got to the (0,0) corner of its closest parent element that is position relative. This is the defined behavior and cannot be altered.
Since you are absolutely positioning the modal, I'd suggest pulling out out of the relatively positioned element and just sticking it under either (a) a non-positioned parent, or (b) just after the body tag.
EDIT: Johnathan beat me to it!
加载中,请稍侯......
精彩评论