Css Sibling Absolute Positioning
Absolute positioning is dependent on the "current positioning context", which may include a parent element (if absolutely or relatively positioned) but will never include a sibling element.
Can you reorganize your dom so that you have a parent-child instead of siblings? If so, you could set the parent's position to relative or absolute and the child's position to absolute and the child's position would remain absolute in relation to the parent.
CSS absolute position orients on sibling rather than parent
To clarify:
"I have always thought that if I position an element absolutely it would
be positioned relative to it's parent element"
Nope. If an element has position: absolute;
, it is positioned relative to the nearest parent in the DOM chain that has position: relative;
or position: absolute;
specified on it. If no parents have it (ie. they are all position: static
, which is the default), then it is positioned relative to the document (page).
When using position: absolute, always:
- Be aware of what parent you want it positioned relative to, and make sure that parent has position: relative; on it.
- Specify one or more of the top/right/bottom/left attributes on the absolutely positioned object.
Why absolute positioned element looks at its sibling element?
position:absolute; looks for the nearest element with position:relative/absolute, and makes his position, based on that element.
In your case, as you have position:relative in the image, the "Irene" text will be placed at the top left corner of the image.
For "Irene" to be at the top left of the document, you either apply position:fixed, wich is based on the browser window, or remove all the position:absolute/relative that are above the "Irene" element.
Place absolute element under sibling
Apply position: relative;
to .box
so that it will support the z-index value without effecting the layout.
.box {
width: 200px;
height: 40px;
background-color: white;
box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.18);
position: relative;
z-index: 10;
}
Another option is to change z-index
of .button to -1
. But it may have other effects in the layout since the element will be positioned behind all other elements.
.button {
height: 20px;
width: 20px;
background-color: white;
text-align: center;
position: absolute;
right: -20px;
top: 10px;
z-index: -1;
}
Static positioned elements affect Absolute position of subsequent sibling elements
As this answer explains, if there is no (top, left, right, bottom) attributes the position: absolute element will be positioned by default as if it was part of the normal flow , this is helpful in case you want to maintain a position: absolute next to its sibling like a tool tip would, and manipulate it with margin property, let say:
margin-top:-40px;
margin-left:30px;
but if you set any (top,left,right, bottom), this will reset the default position and will be relative to the parent.
top:0
Absolute siblings to have the same dimentions
Try the following code
<html>
<head>
<style>
* { margin: 0; padding: 0; }
div#parent { position: relative; }
div#container { position: absolute; left:0; top:0; z-index:100; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.5); }
img { position: relative; width: 100%; }
</style>
</head>
<body>
<div id="parent">
<img src="bg.jpg" draggable="false"/>
<div id="container"></div>
</div>
</body>
</html>
Related Topics
How to Make a Transparent Border with CSS
How Are Scrollbars in New Google Docs UI Styled (Esp. the Arrow Buttons)
How to Tell Which Font Chrome Is Using
CSS Link Element Jumps on Hover
Can Flexbox Divide Items Evenly on Multiple Rows
Flexbox, Min-Height, Margin Auto and Internet Explorer
How to Change Color of Bootstrap Progress Bar with Custom Color
In Less CSS How to Get Less to Watch a Bunch of Files But Compile a Different File When They Change
How to Set a Flex-Container to Be the Width of Its Flex-Items
CSS Transition from 'Display: None' on Class Change
How to Append a Stylesheet to <Head> in Angularjs $Routeprovider
Bootstrap 4, Bg-Inverse Not Showing