Div 2个其他divs？
问题描述：
如图所示添加div3的最佳方法是什么？它应该是单独的div还是div1或div2的孩子？
我不完全确定如何使它，以便我可以很容易地在不同的屏幕尺寸操纵div3。我莫名其妙地觉得设置div位置absolute，用巨大的偏移是错误..
答
这里是你将如何使用绝对定位来放置第三个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%);<div id="container">
<div class="green"></div>
<div class="red"></div>
<div class="box"></div>
</div>
答
.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>把在1区的div 3，然后设置DIV 1到位置：相对的，然后向DIV3位置：绝对的。然后，您可以将div3与div1相关联。 Div3将超出文档流程，因此不会知道div1和div2，所以您需要为div1和div2变得更小（内容将开始被div3覆盖）进行调整。
答
有两种方式。
一个就像你说的，把它设置为绝对。但把它作为第二个div的孩子，这将是相对的，并加上负面的顶部。
第二个是在它和第二个div上使用消极marcing。但看看这两个选项，首先从“最佳实践”的角度来看就不错了。
下面是代码：
.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;
}<div class="first">
</div>
<div class="second">
<div class="third">
</div>
</div>
答
我的建议是将其添加为新的分离DIV，因为它没有在任何其他两个的div完全包含。
关于绝对位置的使用，它是专为这种用途设计的，所以不要觉得使用它很尴尬。为了针对不同的屏幕尺寸保持良好的设计，我建议您使用media queries，以便您可以针对不同的屏幕尺寸调整您的Css。
答
没有使用位置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>