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不同？这可能吗？

Answer 1

结帐小提琴https://jsfiddle.net/3531chbz/1/

诀窍是你不应该将position:属性赋予第二个div，即#div2，所以在这种情况下，第二个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%)
}

Answer 2

将div2放在按钮周围。{/ p>

注意：此<input type='button' class='btn'> button 2</button>无效HTML

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: