Question

怎样用CSS设计实现div相对另外一个div进行定位

图片1是3个div,div1、div2和div3，希望使div3相邻div1，图2是目标，
图1

图2

只借助CSS，怎么实现呢？
再补充一下问题，三3 个div布局不能变了：
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
要求只能修改样式，希望div3相对div1进行定位，div2在div3的下面。我图片上传不了，所以只能描述了。

Answer 1

我也在找怎么实现div3相对div1进行定位，之前我自己做了一个容器，让每个div3显示在div1正右边同一个位置，思路是：

• 每个div2和div3里面的内容都写成静态代码。

• 设置div3相对于div2进行独立定位position:absolute。

• 设置div3默认显示级别z-index:1

• 设置div3默认背景颜色background:#fff。

• 每个div3向右偏移与父div2宽度相同的数值。

• 每个div3向上偏移父div2相对于div1的位移值加上父div2的高度值（每个都独立设置）。

• 设置当鼠标移动到div2上时子div3优先显示，z-index:2。

  代码如下：

  <style>

  .div2{width:100px;height:30px;}

  .div3{position:absolute;z-index:1;float:left;margin-left:100px;background:#fff}

  .div2:hover>.div3{z-index:2;}

  </style>

  <ul><!--div1，在这里没毛用-->

  <li class="div2">番茄

  <ul class="div3" style="margin-top:-30px">

  <li>番茄1</li>

  <li>番茄2</li>

  </ul>

  </li>

  <li class="div2">白菜
  

  <ul class="div3" style="margin-top:-60px">

  <li>白菜1</li>

  <li>白菜2</li>

  </ul></li></ul>

效果如图，不知道你想要的是不是这个

Answer 2

有几个方法：
一种：
div1设置为position：relative，
div2设置为position：absolute，
此时的div2就相对于div1进行基准定位了。。。
因为绝对定位position：absolute，不在标准流中，所以内联元素不知到他的位置，会跑到他的下面去。。。这里就看你需要什么样式了，如果简单的可以用padding和margin配合完成，让内联元素出来。。但屏幕缩小放大就变形了。。
二种，
就是你改写一下你的HTML
<div id="div1">
<div id="div2"></div>
</div>
把div2放到div1里面，里面设置为float，再position：relative进行浮动后地位，
这种方法比第一种好，这里看你的需求了///

追问

我补充了问题，你再看一下

追答

不懂你的意思 这是一道考试题吗？这样子貌似没法定位吧

追问

不是 我最近遇到的问题，因为div2开始是没有的，所以没有考虑，但是突然加进来了，而且div2一定在div3和div1之间，还不能变。我可不可以从id出发，div3就按照div1进行定位呢

追答

适当的改变div 对整体布局不会有影响 是需要局部调整就好 而且尽量不要用 相对定位 说实话 确实有时候不是很好控制 尤其是要求兼容的时候

追问

div2不能变是为了适应其他的地方，同样的一个html，我们是设置不同的样式让它有不同的效果，主体部分div2是在div1和div3之间的，但是这里要求的效果是div1和div3相邻，样式从ID出发不行吗？
还有我希望是相对定位是因为，这样之后，div3就可以和div1一起变化，不脱离文档流

Answer 3

引用萌萌咒的回答：
有几个方法：
一种：
div1设置为position：relative，
div2设置为position：absolute，
此时的div2就相对于div1进行基准定位了。。。
因为绝对定位position：absolute，不在标准流中，所以内联元素不知到他的位置，会跑到他的下面去。。。这里就看你需要什么样式了，如果简单的可以用padding和margin配合完成，让内联元素出来。。但屏幕缩小放大就变形了。。
二种，
就是你改写一下你的HTML
<div id="div1">
<div id="div2"></div>
</div>
把div2放到div1里面，里面设置为float，再position：relative进行浮动后地位，
这种方法比第一种好，这里看你的需求了///

一种：
div1设置为position：relative，
div2设置为position：absolute，
此时的div2就相对于div1进行基准定位了。。。这种说法错了吧 只有div有父子关系才能这么玩