2014-02-21 64 views
1

我有兩個嵌套的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; 
} 

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

在此先感謝。

+1

你能發表[jsfiddle](http://jsfiddle.net/)嗎? – bejonbee

回答

0

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

How to make a <div> always full screen?

改變你的父母DIV + CSS:

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

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

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

+0

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

+0

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

0

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