HTML & CSS | Border ignores z-index

Question

I created a little demo page for excercising. I came across this little problem, there is a bull head image (id: #logoCenter) in the headers center.

I try to put it on top of everything, but the border is on top of it, even though the image #logoCenter has a z-index of 100 and the border has z-index 10? I am confused and hope someone can help me with this little issue.

/* - - - Header - - - - - - - - - - - - - - - - - - - - - - */
.content {
    margin: 0 auto;
    padding-top:120px;
    padding-bottom: 90px;
    transition: 0.3s;
}
.center{
    width: 50%;
    margin: 0 auto;
}
.centerText{
    width: 50%;
    margin: 0 auto;
}

#headerContainer {
    position: relative;
    
    padding: 0;
    margin: 0;
}
#headerMainContainer {
    position: fixed;
    z-index: 10;
    height: 65px;
    background-color: white;
    padding: 0;
    margin: 0;
    width: 100%;
    font-size: 22px;
}

#logoCenter {
    width: 120px;
    z-index: 100;
}

#transparentBorder {
    height: 72px;
    z-index: 10;
    width: 100%;
    border-bottom: 15px solid rgba(0,0,0, 0.78);
    border-radius: 0 0 100px 100px;
    padding: 0;
    margin: 0;
    position: fixed;
}

.header {
    position: absolute;
}
#headerLeft {
}
#headerCenter {
}
#headerRight {
}
.headerTitle {
    margin-top: 20px;
    font-size: 20px;
    overflow: visible;
}
.FooterTitle {
    margin: 0px;
    padding: 10px;
}
.FooterContainer{
    color: white;
    text-align: center;
    padding-top: 10px;
    background-color: black;
    width: 100%;
    bottom: 0px;
    padding-bottom: 10px;
}
.FooterButton{
    color: #d4d4d4;
    font-size: 20px;
    text-decoration: none;
    margin-left: 20px;
}
.FooterButton:hover{
    color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>

    <div class="col-xs-12" id="headerMainContainer">
    <div class="col-xs-12 header" id="headerContainer">
        <div id="headerLeft" class="header col-xs-3 col-xs-offset-0">
            <center><h3>Left</h3></center>
        </div>
        <div id="headerCenter" class="header col-xs-6 col-xs-offset-3">
            <center><img id="logoCenter" src="https://previews.123rf.com/images/miceking/miceking1506/miceking150600220/40800271-Silhouette-Bull-Head-Stock-Vector-bull.jpg"></center>
        </div>
        <div id="headerRight" class="header col-xs-3 col-xs-offset-9">
            <center><h3>Right</h3></center>
        </div>
    </div>
</div>
<div id="transparentBorder"></div>
    
    <div class="col-xs-12 content">
    <center><h4>Welcome!</h4></center>
    <pre>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </pre>

    </div>

    <nav class="navbar navbar-fixed-bottom">
    <div class="FooterContainer">

        <h3 class="FooterTitle">&copy; 2017 Edward Black</h3>
    </div>
</nav>    <script src='http://localhost/rat/public/js/main.js'></script>
<script src='http://localhost/rat/public/js/partials/sidenav.js'></script></body>

NOTE: The example on stackoverflow is corrupt (seems like SO can't handle bootstrap), please checkout the jsfiddle instead.

`#transparentBorder` should be below `#headerMainContainer` resetting z-index under 10 https://jsfiddle.net/u7rfkvqm/2/ no need to reset position and z-index to the logo ;) — G-Cyrillus, Aug 01 '17 at 21:56

Toastrackenigma · Accepted Answer · 2017-08-01T22:02:45.390

Solution

Add position:relative to the #logoCenter class;
Move <div id="transparentBorder"></div> so that it comes before the div with the id of headerContainer

Why it works

z-index is only one way to change which elements are in the foreground and background. Although your element should be on top due to z-index, there are some other factors in play here.

The transparentBorder has a style of position:fixed. Elements with positional styles like this often appear on top of other elements - see z-index not working with fixed positioning.

To ensure that our image always appears on top, we give it a style of position:relative. This means that it has a positional style, but will not actually change it's position unless we supply left and right styles to it (which we won't).

However, your image still will not appear on top. This is because elements further down in HTML appear on top of elements further up. Normally z-index or position deal with this, position:fixed still outweighs both on your image (it is the strongest positional property). So, we will need to ensure that the line is placed prior to the image in your HTML.

I solved it thanks to your instructions, thx! **jsfiddle**: https://jsfiddle.net/u7rfkvqm/3/ — Black, Aug 01 '17 at 22:00
one note though: i placed it at the bottom of the `div` with the `id` **headerMainContainer** and it still works. So I think your last sentence is not true. See my jsfiddle. — Black, Aug 01 '17 at 22:06
@Black Glad I could help! And yes, it seems that you are right, moving it into the parent element works as well :D — Toastrackenigma, Aug 01 '17 at 22:19

HTML & CSS | Border ignores z-index

1 Answers1

Solution

Why it works