如何使用css設置嵌套元素到屏幕邊緣

我有兩個嵌套的div，一個定義屏幕右側的詠歎調，另一個是100％。我正在嘗試將屏幕左側的子div動畫化，而不是右側。我無法爲父div創建動畫，因爲它有其他孩子，我嘗試使用新的css3 vw單元，但是我需要將該值設置爲負數單位，以便向左移動。我已經通過獲取它旁邊元素的大小來工作，併爲這個數量設置了負值，但是一旦你重新調整窗口的大小，它就會移動到不合適的位置。如何使用css設置嵌套元素到屏幕邊緣

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

如果沒有其他的解決方案，必須有檢查屏幕時重新調整大小和更改相應的負值的方式。如果沒有人能爲最初的問題提出解決方案，有人可以解釋如何做到這一點？

在此先感謝。

來源

2014-02-21 Ozay34

你能發表[jsfiddle]（http://jsfiddle.net/）嗎？ – bejonbee

您需要首先使父屏幕的整個寬度。然後，您可以一次一個動畫兒童。看看這個問題：

How to make a <div> always full screen?

改變你的父母DIV + CSS：

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

然後你可以從right: 0孩子格動畫到left: 0

只要確保你的父母DIV是身體元素的第一個孩子，這應該像一個魅力。

來源

2014-02-21 18:05:26 ShaneSauce

這就是問題所在，我無法將其設爲100％的寬度，因此我只需要爲其中一個孩子設置動畫。 – Ozay34

嗯。我無法想象一個場景，你不能將父母div用作假人。換句話說，創建一個特殊的div，只是爲了包裝'＃sideChild'。我需要查看您的代碼才能提供更多幫助。 – ShaneSauce

如果您想將#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); 
    }

來源

2014-02-21 21:23:17 Zagen

如何使用css設置嵌套元素到屏幕邊緣

回答

相關問題