Как установить вложенные элементы в край экрана с помощью css

Question

У меня есть два вложенных div, один определяет арию справа от экрана, а другой - на 100%. Я пытаюсь анимировать дочерний div слева от экрана, а не справа. Я не могу анимировать родительский div, поскольку у него есть другие дети, я попытался использовать новый элемент css3 vw, но мне нужно установить значение на отрицательные единицы, чтобы он вообще перемещался влево. У меня есть это, чтобы работать, получив размер элемента рядом с ним и анимируя отрицательную сумму, но как только вы измените размер окна, он будет удален из положения.

Мой КСС:

#sideParent 
{ 
    position: absolute; 
    top: 150px; 
    bottom: 0px; 
    right: 0px; 
    width: 300px; 
    border-top: 3px solid black; 
    border-left: 3px solid black; 
    text-align: center; 
} 
#sideChild 
{ 
    position: absolute; 
    top: 0px; 
    left: 0px; /* I need this to position to left of screen with a static value */ 
    right: 0px; 
    height: 100%; 
    width: 100%; 
    background-color: white; 
    z-index: 100; 
    border-right: 3px solid black; 
} 

Если нет другого решения, должен быть способ, чтобы проверить, когда экран повторно размера и изменить отрицательное значение соответственно. Если никто не может найти решение для первоначальной проблемы, может кто-нибудь объяснить, как это сделать?

благодарит заранее.

Answer 1

Сначала необходимо сделать родительский экран полной шириной экрана. Затем вы можете анимировать детей по одному. Проверьте этот вопрос:

How to make a <div> always full screen?

изменить ваш родительский DIV CSS:

#sideParent 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

Затем вы можете анимировать ребенка DIV от right: 0 до left: 0

Просто убедитесь, что ваш родительский DIV является первый ребенок элемента тела, и это должно работать как шарм.

Answer 2

Если вы хотите переместить #sideParent влево от экрана, вам следует использовать jquery, если вы хотите, чтобы он находился на краю экрана, тогда код ниже подходит для этого. Если вы хотите, чтобы внутренний элемент находился на краю родительского родителя, вы должны использовать «offset()» вместо «position()», это зависит от вашего проекта, но это зависит от вас.

jsfiddle Demo - Move to the edge of screen

var $mainDiv = $('#sideParent'); 
var $sideChild = $mainDiv.children('#sideChild'); 
var leftOffset = $mainDiv.position().left; 

$mainDiv.hover(
    function(){ 
     $sideChild.css('left', '-' + leftOffset + 'px'); 
    }, 
    function(){ 
     $sideChild.css('left', '0px'); 
    } 

); 

И только в том случае, что вы хотите, чтобы переместить внутреннюю Div всю ширину слева от родителя, вы можете сделать это, как этот

jsfiddle Demo - Move to the edge of parent

#sideParent { 
     position: absolute; 
     top: 150px; 
     bottom: 0px; 
     right: 0px; 
     width: 300px; 
     border-top: 3px solid black; 
     border-left: 3px solid black; 
     text-align: center; 
     background-color:red; 
    } 
    #sideChild { 
     position: absolute; 
     top: 0px; 
     left: 0; 
     right: 0px; 
     height: 100%; 
     width: 100%; 
     background-color: blue; 
     z-index: 100; 
     border-right: 3px solid black; 
     transition: all 2s; 
     -webkit-transition: all 2s; /* Safari */ 
    } 
    #sideParent:hover #sideChild{ 
     /* Taking borders into account with calc, if not necessary only use 100%*/ 
     left: calc(-100% - 6px); 
    }