Position: Relative Appearing Over Position:Absolute

position: relative appearing over position:absolute

I suspect you've already tried it, but set a z-index on your relatively positioned element that's lower than your absolutely positioned element's z-index as the first test.

If that doesn't work, you need to make sure both elements are in the same stacking context. In IE, whenever you apply the position CSS rule to an element, it generates a new stacking context within that element. That means that z-index will only be properly respected within that element's children and children in other stacking contexts with lower z-indexes may still stack above.

In your case, you either need to put the dropdown and button in the same stacking context or apply z-index to the 2 elements that are generating their separate stacking contexts.

How do you get a position:absolute; element above a position:relative; one

When you add a z-index to a child that is in a positioned parent element that also has a z-index, the parent z-index starts a new stacking order, and the child z-index is relative to the parent's z-index. So in this case, z-index: 2 is only compared to other elements inside of the parent with z-index: 1. To get around this, you could just apply the z-index to the span, or don't give the last div a z-index

You can read more about it here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

body {  font-family: arial;}
* {  padding: 10px;}
div {  background: green;  position: relative;  width: 100%;  }
div:first-child {  z-index: 1;}
span {  top: 0;  right: 0;  z-index: 2;  position: absolute;  border: solid 1px red;  height: 70px;  background: white;  display: inline-block;}

<div>  Row 1  <span>  I thought this would show above 'Row 2'</span></div><div>  Row 2</div>

Placing absolute behind relative positioned element

I'm not sure which one you want in front, but you just need to set position on both and set z-index on both.
http://jsfiddle.net/8eLJz/2/

a {
    color: black;
}

nav#mainNav {
    position: relative;
}

nav#mainNav > img {
    position: absolute;
    width: 100px;
    left: 0;
    z-index: 5;
}

nav#mainNav > a > img {
    width: 100%;
}

nav#mainNav > nav {
    width: 100%;
    position: relative;
    z-index: 10;
}

nav#mainNav > nav > a {
    display: block;
    text-align: right;
    background-color: yellow;
}

Why does absolute positioned element is displayed over a static one?

Both the answers above give the adequate explanation to the situation you are facing. Given the problem at hand you can use this solution. Just add position:relative to the static div.

.absolute{  position: absolute;  width: 100px;  height: 100px;  background-color: black;}
.static{  background-color: red;  height: 20px;  width: 400px;  position: relative;}

<div>  <div class="absolute"></div>  <div class="static"></div></div>

position absolute within position relative not working correctly

Position absolute means : absolute coordinates to its parent, without consideration of wrapping, going off the black background or whatever. As absolute positioning pulls the elements out of the HTML flow : your black box behaves like it has no content.

In your case, the to big inputs are 20px to the bottom of the black box, that's what you told it to do.

You have to stylise the black box (make it bigger, fill with some content), and you will see the two inputs staying 20px to the bottom.

Why does position:relative; appear to change the z-index?

You need to refer to the specification and more precisely the painting order to understand when each layer is painted.

Without position:relative your element is not positioned and will be painted at the step (4):

4. For all its in-flow, non-positioned, block-level descendants in tree
   order: If the element is a block, list-item, or other block
   equivalent:

Then we paint the positioned elements (including the .mask) at the step (8)

8. All positioned, opacity or transform descendants, in tree order that fall into the following categories

---

Now when you add position:relative you make the container also positioned thus it will fall in the step (8) too and as described there we consider the tree order since both don't have any z-index specified. So the .container will painted later in this case.

If you change the order of the element (you make the container before the mask) you will notice that position:relative won't have any effect because in both cases the painting order will be the same:

body {
  margin: 0;
  font-family: arial;
}
section {
  position: relative;
  background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
    no-repeat left center/cover;
  height: 70vh;
  display: flex;
  justify-content: center;
}
.container {
  position: relative; /* you can remove this*/
  width: 100%;
  max-width: 1280px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3452ff;
  opacity: 0.7;
}

<section>
  <div class="container">
    <h1>Hello World</h1>
  </div>
  <div class="mask"></div>
</section>

Why does a relative positioned element appear above a floated element?

Elements without a position property set will default to "position:static" which ignores all positioning properties such as z-index. By setting relative positioning to the header element you have introduced the z-index positioning property to that element bringing it in front of the floater element which does not have a z-index property.

Since z-index will be ignored with a static floater element you will have to give that element a position property (absolute, relative or fixed) so it can have z-index as well.

For your example "position: relative;" would work. Once you have set the position property on the floater element you would need to add a z-index value to it that's higher then the header element. Which in this case z-index:1 would be a higher value since z-index is set to default.

Example:

<div id=floater style="float:right; position: relative; z-index: 1;">
   Floater!
</div>
<div id=header style="width: 100%; position: relative; background-color:   lightgreen">
  This is the header
</div>

Position absolute inside one relative above another relative

The z-index of the second .main div must be lower than that of the first div that contains the absolute div:

add a class to the second main

 <div class="main">
   <div class="content">11112222233</div>
   <div class="abs"></div>
</div>
<div class="main second"></div>

then use this style:

.second {z-index:99;}

Example

Why does absolute position ignore elements with static positions?

For one thing, the premise is incorrect. There are situations where a statically positioned element can provide the containing block of an absolutely positioned element. position, transform, will-change and contain are all properties that will cause an element to establish an absolute positioning containing block

For example:

.outer {
  width:50vw;
  height:50vh;
  background-color:lightblue;
  margin: 25vh 25vw;
  transform:translateX(0);
}
.inner {
  position:absolute;
  width:100px;
  height:50px;
  inset: 0;
  background-color:red;
}

  <div class="outer">
    <div class="inner"></div>
  </div>

---

Related Topics