Html 相对于父元素的父元素定位元素

是否可以放置与父对象的父对象相关的元素

<div id='div1'>
   <div id='div2'>
       <input type='button' class='btn'> button 2</button>
       <input type='button' class='btn'>button 3</button>
       <input type='button' class='btn'>button 1</button>
   </div>
</div>

但这将使其相对于第二个div居中。第二个div的大小与父div的大小不同。这可能吗？

检查小提琴

诀窍是你不应该给第二个div赋予

位置：

属性，即

#div2

，因此在这种情况下，第二个div中的子级将从其父级继承位置

此外，需要将输入位置更改为

位置：绝对

HTML

<div id='div1'>
   <div id='div2'>
       <button class='btn'> button 2</button>
       <button class='btn'>button 3</button>
       <button class='btn'>button 1</button>
   </div>
</div>

---

只需将包裹在按钮周围的

div2

居中即可

注意：此

按钮2

不是有效的HTML

#第1部分{
高度：250px；
位置：相对位置；
背景：浅绿色；
}
#第二组{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景：红色；
}

按钮2
按钮3
按钮1

给我们一个JSFiddle，展示您拥有的东西，这样这里的成员就可以使用它了，还有一个它应该是什么样子的图像。为什么你不能把

div2

元素放在中心位置呢？也许可以用一些东西来帮助你想象你想要实现什么？如果您试图相对于div1定位，为什么div2中包含元素？另外，请注意，相对定位指的是“如果不重新定位，它将放置在何处”以外的上下文。

<div id='div1'>
   <div id='div2'>
       <button class='btn'> button 2</button>
       <button class='btn'>button 3</button>
       <button class='btn'>button 1</button>
   </div>
</div>

#div1 {
    position:relative;
    background-color:green;
    height:400px
}
#div2 {
    background-color:blue;
    height:200px;
    text-align:center;
}
.btn {
    position:absolute;
    top: 50%;
    transform: translateY(-50%)
}