How to do css position code for div boxs? - html

Question

I have three div boxes
box1 - menu, box3 - info, and box2 - slide box which I want to be back of box1 and box3, (As the photo shows http://s16.postimg.org/u9mwuhmcl/111.png)
My attempt:
.box1 {
width:980px;
height:100px;
background-color:#CCCCCC;
}
.box2 {
width:980px;
height:100px;
background-color:#000;
position:relative;
z-index:1 ;
}
.box3 {
width:980px;
height:100px;
background-color:#CCCCCC;
}
<div class="box1">Menu</div>
<div class="box2">Slider</div>
<div class="box3">Info text</div>

Answer 1

Here is one options using position relative on the top and bottom boxes.
JSfiddle Demo
* {
color: white;
}
.box1,
.box3 {
margin: auto;
}
.box2 {
height: 100px;
background-color: #000;
position: relative;
z-index: -1;
}
.box1 {
width: 980px;
height: 100px;
background-color: #CCCCCC;
position: relative;
top: 1em;
}
.box3 {
width: 980px;
height: 100px;
background-color: #CCCCCC;
position: relative;
top: -1em;
}
<div class="box1">Menu</div>
<div class="box2">Slider</div>
<div class="box3">Info text</div>
2nd option with position relative on the second box.
JSfiddle Demo 2
* {
color: white;
}
.box1,
.box3 {
margin: auto;
}
.box2 {
height: 100px;
background-color: #000;
position: relative;
top: -1em;
z-index: -1;
}
.box1 {
width: 980px;
height: 100px;
background-color: #CCCCCC;
position: relative;
}
.box3 {
width: 980px;
height: 100px;
background-color: #CCCCCC;
position: relative;
margin-top: -2em;
}
<div class="box1">Menu</div>
<div class="box2">Slider</div>
<div class="box3">Info text</div>

Answer 2

Try
.box1, .box3 {
position: relative;
z-index: 0;
}
.box2 {
z-index: 1;
}

Answer 3

for box 1 and box 3.
Note: please set top,width,height according to your need.
.box1 {
width:500px;
height:50px;
background-color:#CCCCCC;
position:absolute;
left:0px;
right:0px;
top:0px;
}
.box3 {
width:500px;
height:50px;
background-color:#CCCCCC;
position:absolute;
left:0px;
right:0px;
top:100px;
}
For box 3
.box3 {
width:980px;
height:100px;
background-color:#CCCCCC;
margin-top:40px;
}

Answer 4

You better need a wrapper to simply the code.
No need to play with z-index in your case because position: relative; will give your block priority to the default position: static;
.wrapper{
width: 980px;
}
.box1, .box3 {
height:100px;
margin: 0 20px;
background-color:#CCCCCC;
box-sizing: padding-box;
position: relative;
}
.box2 {
height:100px;
margin: -20px 0;
background-color:#000;
}
<div class="wrapper">
<div class="box1">Menu</div>
<div class="box2">Slider</div>
<div class="box3">Info text</div>
</div>

Answer 5

use this-
.box1 {
width:90%;
height:100px;
background-color:#CCCCCC;
margin:0 auto;
position: relative;
z-index: 2;
bottom: -10px;
}
.box2 {
width:100%;
height:100px;
background-color:red;
position:relative;
z-index:1 ;
margin:0 auto;
padding:10px;
}
.box3 {
background-color: #cccccc;
height: 100px;
margin: 0 auto;
position: relative;
top: -10px;
width:90%;
z-index: 4;
<div class="box1">Menu</div>
<div class="box2">Slider</div>
<div class="box3">Info text</div>
I hope it will helps you.