uneeb uneeb - 1 month ago 5
CSS Question

Relative and absolute creating issue with other div

I am using two divs with position

relative
and position
absolute
. They are working fine but the problem is when I am placing another div below them it should start after the upper div/background image, but instead it is going behind. Here's the fiddle. I could not upload the image.

https://jsfiddle.net/630gLxfk/

here's the code:



.banner{
width: 100%;
position: absolute;
top: 0;
left: 0;
background-image:url('../images/main.png');
height: 100%;
}

.banner div{
font-family: young;
top: 0;
bottom: 0;
left: 0;
display: table;
right: 0;
text-align: center;
margin: auto;
width: 100%;
position: absolute;
color: white;
}

.banner h1{
font-size: 70px;
}

.logo{
position: relative;
background-color: #cccccc;
background: rgba(204, 204, 204,0.8);
}

<div class="banner">
<div>
<h1>Let's Move Together</h1>
</div>
</div>

<div class="logo" align="center">
<img src="images/logo.png" class="img-responsive" />
</div>
<div style="">
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadasaa</h1>
</div>




Answer

Assuming you wanting the 'asdadadas' content below the title & donate button:

<div class="content-under">
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadas</h1>
<h1>asdadadasaa</h1>
</div>

Then in the CSS

.content-under {
    position:absolute;
    top:60%;
}

See: https://jsfiddle.net/04ad4ok0/

Comments