Блог

Главная - Вопросы по программированию - css3 translate становится относительным позиционированием для дочерних элементов

css3 translate становится относительным позиционированием для дочерних элементов

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня есть боковая панель, которая содержит 2 раздела

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

Когда я нажимаю на основной элемент, оба 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;
}

в результате div «leftSection» перемещается влево, а «rightSection» перемещается влево, и вы можете видеть только «rightSection», потому что они оба находятся в разделе «переполнение: скрытый» div.

всплывающий 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>

всплывающий div получает относительное положение к rightSection
Я проверил это, и это потому, что moveLeft использует свойство translate

У кого-нибудь есть идея?

Ответ №1:

Похоже, что функция 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>