用css左右固定圖像位置

我想放一個左右固定圖像，我不知道爲什麼右邊的圖像沒有固定時纔會右移。這是我的代碼：用css左右固定圖像位置

<img src="img/leftImage.jpg" id="leftImage" /> 
<img src="img/rightImage.jpg" id="rightImage" />

和我的CSS：

#leftImage{ 
    left: 0; 
    width: 150px; 
    height: 100%; 
    position: fixed; 
} 

#rightImage{ 
    right: 0; 
    width: 150px; 
    height: 100%; 
    position: fixed; 
}

誰能幫助我？謝謝！

編輯

這是我的index.html：

<body ng-cloak> 
    <img src="img/leftImage.jpg" id="leftImage" /> 
    <div id="homescreen" class="container"> 
     <div ui-view></div> 
    </div> 
    <img src="img/rightImage.jpg" id="rightImage" /> 
    <footer></footer> 
</body>

和我有CSS：

body { 
    background: url(/img/background.jpg) repeat fixed; 
    background-position-y: -50px; 
    background-position-x: -50px; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

#homescreen { 
    margin-top: 150px; 
}

容器是引導類。

來源

2017-04-16 Motomine

它的所有罰款，你所做的一切。我認爲你的CSS被其他風格所覆蓋。你可以分享你所有的CSS嗎？ – Lucian

似乎工作正常。 – cosmoonot

我剛剛添加了關於該問題的更多代碼。 – Motomine

你忘了添加值top

做這樣的事情：

#leftImage { 
    top: 20px; /* your required value */ 
    left: 0; 
    width: 150px; 
    height: 100%; 
    position: fixed; 
} 

#rightImage { 
    top: 20px; /* your required value */ 
    right: 0; 
    width: 150px; 
    height: 100%; 
    position: fixed; 
}

來源

2017-04-16 18:55:37 Lucian

是的！這樣做解決了我的問題！我以爲我可能不需要那個。謝謝！ – Motomine

你總是需要這樣做，因爲如果你不使用它，默認情況下它會根據HTML中的內容位置進行定位。即使它適合你，它也不會被交叉瀏覽。所以請始終記住這一點。不要忘記接受答案，並樂觀向上 – Lucian

我已經upvoted並接受它。感謝您的建議，我是開發人員，而不是設計師，所以這些評論對我來說都非常有用！ – Motomine

用css左右固定圖像位置

回答

相關問題