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

Question

是否可以将元素相对于父级的父级放置？

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

所需的CSS是将按钮相对于第一个div在垂直方向上居中排列。我尝试过的CSS：

.btn{
     position: relative;
     top: 50%;
     transform: translateY(-50%)
  }

但这样做会使它相对于第二个div居中。但是，由于第二个div的大小与父div不同，这是否可行？

- Taher Galal

---

能否给我们提供一个 JSFiddle，展示一下你的代码，这样这里的成员就可以随意尝试了。 - CalvT

还有一个这个应该是什么样子的图片。为什么你不能把div2元素居中呢？ - Paulie_D

也许需要一些帮助来可视化你想要实现的内容？如果您正在相对于div1定位，为什么元素包含在div2中？ - David McEleney

另外，请注意，相对定位从不涉及除“如果不重新定位，它将放置在哪里”之外的其他上下文。 - connexo

Answer 1

将包裹在按钮周围的 div2 居中对齐。

注意：这个<input type='button' class='btn'> button 2</button> 不是有效的 HTML 代码。

#div1 {
  height: 250px;
  position: relative;
  background: lightgreen;
}
#div2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: red;
}

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

- Paulie_D

Answer 2

查看 fiddle https://jsfiddle.net/3531chbz/1/

诀窍是不应该给第二个 div 即 #div2 添加 position: 属性，这样在这种情况下，第二个 div 中的子元素将从其祖先元素中获取位置，

同时需要将输入框的位置更改为 position:absolute

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>

CSS

#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%)
}

- Nilesh Mahajan