超过2个其他div？

Question

如图所示，添加div3的最佳方法是什么？它应该是单独的div还是div1或div2的孩子？

我不完全确定如何制作它以便我可以轻松地操纵不同屏幕尺寸的div3。我不知何故觉得将div位置设置为absolute并使用巨大的偏移量是错误的。

Answer 1

以下是使用绝对定位放置第三个<h1>HOW IT WORKS</h1> <div class="row"> <div class="col-xs-4"> <img src="img/create.svg" class="img-responsive" id="works" alt="create"> <h3><b>CREATE YOUR IDEAS</b></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae purus nibh. Vestibulum vehicula vitae tellus non tincidunt. Aenean magna ipsum, ultricies ac ante non, maximus suscipit lectus. Donec tincidunt velit augue, in egestas est ultrices eget. Suspendisse commodo mi nulla, sed condimentum purus lobortis ut.</p> </div> <div class="col-xs-4"> <img src="img/sell.svg" class="img-responsive" id="works" alt="sell"> <h3><b>POST IT</b></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae purus nibh. Vestibulum vehicula vitae tellus non tincidunt. Aenean magna ipsum, ultricies ac ante non, maximus suscipit lectus. Donec tincidunt velit augue, in egestas est ultrices eget. Suspendisse commodo mi nulla, sed condimentum purus lobortis ut </p> </div> <div class="col-xs-4"> <img src="img/earn.svg" class="img-responsive" id="works" alt="earn"> <h3><b>EARN IT</b></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae purus nibh. Vestibulum vehicula vitae tellus non tincidunt. Aenean magna ipsum, ultricies ac ante non, maximus suscipit lectus. Donec tincidunt velit augue, in egestas est ultrices eget. Suspendisse commodo mi nulla, sed condimentum purus lobortis ut</p> </div> </div>的方法。有几种方法可以做到这一点，我认为这个方法最容易理解。

div

#container{
  width: 400px;
  height: 200px;
  background: blue;
  position: relative;
}
div.green{
  background: green;
  display: block;
  height: 100px;
}
div.red{
  background: red;
  display: block;
  height: 100px;
}
div.box{
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);

Answer 2

.div1 {
  position: relative;
  border: 1px solid #ccc;
  height: 100px;
  }

.div2 {
  border: 1px solid #ccc;
  height: 100px;
  }

.div3 {
  position: absolute;
  top: 35%;
  width: 25%;
  border: 1px solid red;
  height: 100px;
  right: 5%;
  background: rgba(45,45,45,.25);
  }

<div class="div1">Div1
<div class="div3">Div3</div>
</div>
<div class="div2">Div2</div>

将div 3放在div 1中，然后将div 1设置为position：relative，然后将div3设置为position：absolute。然后你可以将div3与div1相关联。 Div3将不在文档的流程中，因此不会知道div1和div2所以你需要调整它，因为div1和div2变小（内容将开始被div3覆盖）。

Answer 3

你有两种方法。

一个就像你说的那样，把它设置为绝对的。但是把它作为第二个div的孩子，它将是相对的，并添加负顶部。

第二个是使用负面游戏和第二个div。但是看看这两个选项，第一个就是＃34;最佳实践＆＃34;点。

以下是代码：

＆＃13;

＆＃13;

.first,.second {
  width:100%;
  background:#000;
  height:80px;
}
.second {
  position:relative;
  background:#888;
}
.third {
  position:absolute;
  width:100px;
  height:40px;
  right:50px;
  top:-20px;
  background:red;
}

＆＃13;

<div class="first">
</div>
<div class="second">
  <div class="third">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我的建议是将其添加为新的分隔div，因为它不完全包含在其他两个div中。

关于绝对位置的使用，它是为这种用途而设计的，所以不要觉得使用起来很尴尬。为了保持不同屏幕尺寸的良好设计，我建议您使用media queries，以便根据不同的屏幕尺寸调整Css。

Answer 5

不使用职位absolute或relative。

.bigdiv {
  height: 100px;
  background: green;
  border: 1px solid;
}
.smalldiv {
  width: 200px;
  height: 50px;
  background: orange;
  float: right;
  margin-right:10px;
  transform: translateY(-50%);
  /*
  you can use margin-top:-50px; for browser compatibility
  margin top shoult be -(half of div height);
  
  */
}

<div class='wrapper'>
  <div class='bigdiv'>
  </div>
  <div class='smalldiv'>
  </div>
  <div class='bigdiv'>
  </div>

</div>