stacking order without z-index

Question

I am facing the following problem : My .line div comes above the .list div and I do not understand why. I defined no new stacking context through z-index so shouldn't stacking order only be defined by the order of appearance in HTML? Or is there something else defining a new stacking context in my case that I don't see?

Thanks a bunch

body {
    font-family:helvetica, sans-serif;
}

.line {
    background-color:red;
    height: 150px;
    width:1px;
    float:left;
    position: relative;
    left: 57px;
    top:20px;
}

.list {
    list-style-type:none;
    display: inline-block;    
}

.written {
    width:200px;
    position: relative;
    top: 5px;
    
}

.dot {
    border: 1px solid blue;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    float:left;
    margin: 5px;
}

<html>
    <head>
        <link href="./style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div class=line>
        </div>
        <ul class=list>
            <li>
                <div class=dot>
                </div>
                <p class=written>First thing</p>
            </li>
            <li>
                <div class=dot>
                </div>
                <p class=written>Second thing</p>
            </li>
            <li>
                <div class=dot>
                </div>
                <p class=written>Third thing</p>
            </li>
        </ul>
    </body>
</html>

I think Oleg is more after why the line ends up in front of the dots. — Corné, Dec 14 '18 at 12:22
Yes I want the vertical line to be behind the dots, but more than just a workaround I would really like to understand why it keeps coming to the front because I don't see the rule that has this effect :) — Oleg, Dec 14 '18 at 13:14

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

From the CSS 2 specification.

Step 4: For all its in-flow, non-positioned, block-level descendants in tree order

Step 8: All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.

<ul class=list> is painted at step 4. <div class=line> is painted at step 8. i.e. on top.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 14 '18 at 12:12

Quentin

914,110
126
1,211
1,335

Thanks a lot, looks pretty complete but that's a bit chinese to me. Is it because my list is not positioned? If I add position:relative; it keeps doing the same so that couldn't be it right? Is it because my
– Oleg Dec 14 '18 at 13:28

score 0 · Answer 2 · answered Dec 14 '18 at 12:13

0

Your <div class=line> comes above your <ul class=list> because of its position:relative; property. If you add the same to your .list selector, your <ul class=list> will be on top! View example here : https://jsfiddle.net/Lsq0tc12/

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/position

answered Dec 14 '18 at 12:13

hexangel616

346
2
19

Yeah no it doesn't – Oleg Dec 14 '18 at 13:18
Yeah it does. Add a `background-color:black;` to your `.list` class and you'll see it hides the red line, therefore it is above / on top. See here : https://jsfiddle.net/Lsq0tc12/1/ – hexangel616 Dec 14 '18 at 14:10
Ooh now I get it, thanks a lot – Oleg Dec 14 '18 at 15:17
You're welcome, and also, welcome to Stack Overflow. =) If this answer or any other one solved your issue, please mark it as accepted. – hexangel616 Dec 14 '18 at 16:42

score 0 · Answer 3 · answered Dec 14 '18 at 13:32

try this code.

body {
    font-family:helvetica, sans-serif;
}

.line {
    background-color:red;
    height: 150px;
    width:1px;
    float:left;
    position: relative;
    left: 57px;
    top:20px;
}

.list {
    list-style-type:none;
    display: inline-block;    
}

.written {
    width:200px;
    position: relative;
    top: 5px;
    
}

.dot {
    border: 1px solid blue;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    float:left;
    margin: 5px;
}

.list > li {
  margin-left: -56px;
}

<html>
    <head>
        <link href="./style.css" type="text/css" rel="stylesheet">
    </head>
    <body>                
        <div class=line>
          <ul class=list>
            <li>
                <div class=dot>
                </div>
                <p class=written>First thing</p>
            </li>
            <li>
                <div class=dot>
                </div>
                <p class=written>Second thing</p>
            </li>
            <li>
                <div class=dot>
                </div>
                <p class=written>Third thing</p>
            </li>
        </ul>
        </div>
    </body>
</html>

i hope this help you. thanks.

Hi mate, thanks but it does not work – Oleg Dec 14 '18 at 15:13 — Oleg, Dec 14 '18 at 15:13

stacking order without z-index

3 Answers3