CODEWITHSUNDEEP
htmlcss
BozanicJosip
BozanicJosip

Reputation: 507

Wrapping around position: relative

How to make the green div wrap around the blue and yellow divs (his children) in this particular problem:

https://jsfiddle.net/y74ueuLa/

HTML

<div id="main">
    <div id="one"></div>
    <div id="two"></div>
</div>
<div id="footer"></div>

CSS

#main {
    width: 100%;
    background-color: green;
    z-index: -2;
    position: relative;
    margin-bottom: 10px;
}

#one {
    width: 100%;
    height: 150px;
    background-color: blue;
    position: absolute;
    z-index:-1;
}

#two {
    position: relative;
    top: 100px;
    z-index:3;
    width: 300px;
    height: 500px;
    background-color: yellow;
    margin: 0px auto;
}

Upvotes: 2

Views: 57

Answers (1)

SteveB
SteveB

Reputation: 153

The green div is wrapped around the blue div. It just doesn't appear that way because the blue div is on top.

With div #two you're positioning it relatively with top 100px. When you position something relative, you're moving the visual component of the div relative to where it would naturally fall in the browser. It's equivalent to saying "visually move down 150px from where you are". You could just make the green div taller, but I don't think that's what you're going for.

I think what you're trying to do (and please correct me if I'm wrong), is this: https://jsfiddle.net/dk6L1zLL/ 

#main {
    width: 100%;
    background-color: green;
    z-index: -2;
    position: relative;
    margin-bottom: 10px;
    padding-top:10px;
    padding-bottom:10px;
}

#one {
    //width: 100%;
    height: 150px;
    background-color: blue;
    //position: absolute;
    z-index:-1;
    margin:0 10px 0;
}

#two {
    //position: relative;
    //top: 100px;
    z-index:3;
    width: 300px;
    height: 500px;
    background-color: yellow;
    margin: 0px auto;
    /*margin-bottom: 500px;*/
}

#footer {
    height: 100px;
    background-color: red;
    width: 100%;
    position: relative;
    z-index: -3;
}
<body>
    <div id="main">
        <div id="one"></div>
        <div id="two"></div>
    </div>
    <div id="footer"></div>
</body>

I got rid of a lot of the positioning rules and added some margin and padding.

Upvotes: 1

Related Questions