Question

我有两个嵌套的div，一个定义了屏幕右侧的咏叹调，另一个定义了100％。我正在尝试将子div设置为屏幕左侧而不是右侧。我不能为父div设置动画，因为它有其他孩子，我尝试使用新的css3 vw单元，但是我需要将值设置为负单位以使其向左移动。我通过获取它旁边的元素的大小来实现这个功能，然后设置负数量的动画，但是一旦你重新调整窗口的大小，它就会移动到位。

我的css是：

#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是body元素的第一个子元素，这应该像魅力一样。

Answer 2

如果你想将#sideParent移动到屏幕的左边，那么你应该使用jquery，如果你想让它在屏幕的边缘，那么下面的代码就符合这个需要。如果你想让内部元素位于父母父母的边缘，那么你应该使用＆＃34; offset（）＆＃34;而不是＆＃34; position（）＆＃34;，这取决于您的项目，但这取决于您。

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

如何使用css将嵌套元素设置到屏幕边缘

2 个答案: