I have set an image background on the first div. Now, I am looking to create a div (illustrated here with an orange background) and another box placed "above" it for comments (referred to as the "comments box").
The issue I am facing is that I do not want the content of the "orange zone" to appear underneath it.
Currently, this is what I have:
The problem with my current code is that some of the content I place in the "orange zone" div ends up going under the Comment box, which is not visually appealing.
Here is a link to a jsfiddle showcasing this issue: http://jsfiddle.net/uu0xe2xL/1/:
HTML
<body class='example-page'>
<div id="content">
<div class="page-main-image" >
</div>
<!--div with orange background -->
<div id="orange-zone">
</div>
<!-- comment box -->
<div class="comment-box comment" style="opacity: 1;">
xxx it's cool to comment<br/>
nice one dude
</div>
</div>
</body>
CSS
html {
height:100%;
}
body.example-page {
height:100%;
}
#content {
height: 100%;
margin-top: 18px;
@media (max-width: 767px) {
margin-top: 9px;
}
}
.page-main-image {
height: 100%;
background: url('http://www.thedrum.com/uploads/drum_basic_article/115509/main_images/BBCb.jpg'); background-size: cover; background-repeat: no-repeat;
}
#orange-zone {
position:fixed;
top:10%;
left:30%;
width:100%;
height:100%;
background-color:orange;
}
.treasure{
position: absolute;
}
.comment-box {
position:relative;
text-align: center;
background-color: rgba(255, 255, 255, 0.3);
padding: 10px;
bottom:5%;
right:5%;
}
.comment {
position:absolute;
}
Desired Outcome
Notice how the orange area never extends under the Comment zone, but the background image with an island remains visible under the "comment box," which is the desired effect.
Additionally, I need to add text to the orange zone, and I cannot place the background image in the body tag as it needs to start right after the menu, having a container of its own.
Feel free to make changes to this jsfiddle