我有一个可容纳2个div的侧边栏
<div class="sectionsContainer clearfix"><-- Sidebar -->
<div class="leftSection pull-left">
<p>Maor</p>
</div>
<div class="rightSection pull-right">
<div class="backButton clearfix">
<i class="fa fa-chevron-left fa-2x blueColor pull-left"></i>
<p class="pull-left"><strong>Back</strong></p>
</div>
<button class="btn blueButton ng-scope" data-ng-click="openPopover()"><i class="fa fa-plus"></i></button>
<div class="popover fade bottom in">
<div class="arrow"></div>
<div class="popover-content">...</div>
</div>
</div>
</div>
他们都上课：
.leftSection, .rightSection {
width:50%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
当我单击Maor元素时，leftSection和rightSection都将获得“ moveLeft”类：
.moveLeft {
-ms-transform: translate(-100%,0); /* IE 9 */
-webkit-transform: translateX(-100%); /* Chrome, Safari, Opera */
transform: translate(-100%,0); /* Standard syntax */
-webkit-transform-style: preserve-3d;
}
结果是“ leftSection” div左移而“ rightSection”左移，您只能看到“ rightSection”，因为它们都在“ overflow：hidden” div下。
popover div是：
position:absolute;
top:0;
left:0;
max-width:276px;
padding:1px;
text-align:left;
background-color:#FFF;
background-clip:padding-box;
border:1px solid rgba(0,0,0,0.2);
border-radius:6px;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
现在，当我单击：
<button class="btn blueButton ng-scope" data-ng-click="openPopover()"><i class="fa fa-plus"></i></button>
popover div获取相对于rightSection的相对位置
我已经检查了它及其原因，因为moveLeft使用translate属性
有人有主意吗？
最佳答案
似乎translate函数在内部使用相对位置来翻译元素。而且，如果在相对定位的父级中具有绝对定位的元素，则该位置是相对于父级的。
因此，您唯一的选择是将popover div移出相对定位的父级。我通常将它们直接放入体内：
<body>
<div class="sectionsContainer clearfix"><-- Sidebar -->
<div class="leftSection pull-left">
<p>Maor</p>
</div>
<div class="rightSection pull-right">
<div class="backButton clearfix">
<i class="fa fa-chevron-left fa-2x blueColor pull-left"></i>
<p class="pull-left"><strong>Back</strong></p>
</div>
<button class="btn blueButton ng-scope" data-ng-click="openPopover()"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="popover fade bottom in">
<div class="arrow"></div>
<div class="popover-content">...</div>
</div>
</body>
关于javascript - CSS3翻译成为 child 的相对位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24614717/