Question

我有三个div框

box1 - menu，box3 - info和box2 - 我想要回到box1和box3的幻灯片框，（如图所示http://s16.postimg.org/u9mwuhmcl/111.png）

我的尝试：

＆＃13;

    .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;
     
    }

＆＃13;

    <div class="box1">Menu</div>
    <div class="box2">Slider</div>
    <div class="box3">Info text</div>

＆＃13;

Answer 1

以下是在顶部和底部框中使用位置相对的一个选项。

JSfiddle Demo

＆＃13;

* {
  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;
}

＆＃13;

<div class="box1">Menu</div>
<div class="box2">Slider</div>
<div class="box3">Info text</div>

＆＃13;

在第二个方框中位置相对的第二个选项。

JSfiddle Demo 2

＆＃13;

* {
  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;
}

＆＃13;

<div class="box1">Menu</div>
<div class="box2">Slider</div>
<div class="box3">Info text</div>

＆＃13;

Answer 2

使用此 -

.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>

我希望它会对你有所帮助。

Answer 3

尝试

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

.box2 {
    z-index: 1;
}

Answer 4

方框1和方框3的

。注意：请根据需要设置顶部，宽度，高度。

.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;
}

对于方框3

.box3 {
      width:980px;
      height:100px;
      background-color:#CCCCCC;
     margin-top:40px;
    }

Answer 5

您最好只需要一个包装器来代码。在您的情况下无需使用 z-index ，因为 position：relative; 会将您的块优先级设置为默认的位置：static; < / p>

＆＃13;

.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;
}

＆＃13;

<div class="wrapper">
    <div class="box1">Menu</div>
    <div class="box2">Slider</div>
    <div class="box3">Info text</div>
</div>

＆＃13;

如何为div框做css位置代码？

5 个答案: