浮动元素向右避开滚动条
我试图将一个元素浮动在主页内容之外，并希望避免水平滚动条将其切断
示例 http://www.warface.co.uk/clients/warface.co .uk/test
我注意到它是在页脚中实现的，但不知道如何实现 http://www.webdesignerdepot.com/
HTML
<div class="wrapper">
wrapper
<div class="imageright">
</div><!-- imageright END -->
</div><!-- wrapper END -->
CSS
.wrapper {
background: yellow;
margin:0 auto;
max-width: 1140px;
height:500px;
}
.imageright {
background: aqua;
width:520px;
height:285px;
display:block;
position: absolute;
float:right;
right:-100px;
}
Im trying to float an element right outside of the main page content and want to avoid the horizontal scroll bar from cutting it off
Example
http://www.warface.co.uk/clients/warface.co.uk/test
I've noticed its been achieved in the footer here, but can't figure it out how
http://www.webdesignerdepot.com/
HTML
<div class="wrapper">
wrapper
<div class="imageright">
</div><!-- imageright END -->
</div><!-- wrapper END -->
CSS
.wrapper {
background: yellow;
margin:0 auto;
max-width: 1140px;
height:500px;
}
.imageright {
background: aqua;
width:520px;
height:285px;
display:block;
position: absolute;
float:right;
right:-100px;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
position:absolute;和right:-100px;将元素推过视口的右边缘。浮动不会影响绝对定位的元素。如果您希望元素距边缘
100px，请将其设置为正值100px。或者，如果您希望它紧靠边缘，请将其设为0。如果你确实想浮动它，请删除绝对定位。希望我理解了这个问题，希望这有帮助！
编辑：我重新阅读了这个问题，并认为更好的解决方案是将
position:relative;添加到包装器中。现在，您的绝对位置元素是相对于视口定位的。如果您给予wrapper相对定位，则会导致imageright相对于wrapper定位。The
position: absolute;and theright:-100px;is pushing your element past the right edge of the viewport. Floating does not affect absolutely positioned elements.If you want the element to be
100pxaway from the edge, make that a positive100px. Or, if you want it right up against the edge, make it0. If you truly want to float it, remove the absolute positioning.Hopefully I understood the question, and I hope this helps!
Edit: I re-read the question and think an even better solution would be to add
position: relative;to the wrapper. Right now, your absolutely position element is positioned relative to the viewport. If you givewrapperrelative positioning, it will causeimagerightto be positioned relative towrapper.您可以将
overflow:hidden;应用于正文，这就是您获得所需内容的方式，但这是非常不可取的。另一种使 div“脱离流动”的方法是使其位置：固定；但这意味着当您向下滚动时它将可见。you can apply
overflow:hidden;to the body, which is how you get what you're after, but it's highly inadvisable. Another way to take the div "out of flow" is to make itposition: fixed;but that will mean it will be visible as you scroll down.