CODEWITHSUNDEEP
htmlcss
idlackage
idlackage

Reputation: 2863

Place relative content over absolute div

I'm trying to place text over an image (simplified as a div here) that I can blur and set other filters on, but I want that text to be relatively positioned so that the parent container can resize.

#container {
  position: relative;
  width: 100%;
  background: red;
  height: 300px; /* For display sample purposes--no height is defined in production */
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: blue;
  opacity: 0.5;
}

.content {
  color: white;
  font-weight: bold;
  font-size: 3em;
}
<div id="container">
  <div class="bg"></div>
  <div class="content">
    asdasdasdasd
  </div>
</div>

This causes the blue bg to be displayed over the content. I know that I can have the content div be also absolutely positioned, but then the container's height won't change.

How can I accomplish what I'm looking for?

Fiddle

Upvotes: 4

Views: 432

Answers (2)

Rudra
Rudra

Reputation: 555

I think this stuff will work for you and i hope it will be helpful to you. just try it.

#main {
  position: relative;
  height: 200px;
  width: 200px;
  border: 2px solid #aaa;
  text-align:center
}
#center {
  position: relative;
  left:25%;
  top:25%;
  border: 1px solid #aaa;
  width: 100px;height: 100px; 
  text-align:center
}

div { height: 50px;width: 50px;}

.blue { background-color: lightblue; position: absolute; }
.green {background-color: lightgreen; position: absolute; right:0}
.yellow {background-color: yellow; position: absolute; right:0; bottom:0 }
.red {background-color: lightpink; position: absolute;  bottom:0;}
<div id="main">
  <div class="blue">blue</div>
  <div class="green">green</div>
  <div class="yellow">yellow</div>
  <div class="red">red</div>
  <div id="center">
    <div class="blue">center-blue</div>
    <div class="green">center-green</div>
    <div class="yellow">center-yellow</div>
    <div class="red">center-red</div>
  </div>
</div>
<p>This is relative absolute using css.</p>

Upvotes: 0

patelarpan
patelarpan

Reputation: 8041

Add following style to .content class

.content {
  position: relative;
 z-index: 1;
}

Upvotes: 2

Related Questions