Css3翻译为子节点的相对定位

css3 translate becomes relative positioned for children

本文关键字：相对 定位 子节点 翻译 Css3      更新时间：2023-09-26

我有一个可以容纳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>

它们都有class:

.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得到" movelleft " class:

.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"，因为他们都在"溢出:隐藏"div。

popoverdiv is:

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>

弹出窗口div获取相对位置rightSection我已经检查过了，这是因为 movelleft 使用翻译属性

有人有主意吗?

翻译函数似乎在内部使用相对位置来翻译元素。如果你在相对定位的父元素中有一个绝对定位的元素，它的位置是相对于父元素的。

因此，您唯一的选择是将popoverdiv移出相对位置的父元素。我通常把它们直接放在正文中:

<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>
相关文章：