Question

我试图将一个元素浮动到主页面内容之外，并希望避免水平滚动条将其剪掉

示例 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;
    }

Answer 1

position: absolute;和right:-100px;正在推动您的元素越过视口的右边缘。浮动不会影响绝对定位的元素。

如果您希望元素远离边缘100px，请将其设为正100px。或者，如果您希望它正好靠边缘，请将其设为0。如果你真的想浮动它，请删除绝对定位。

希望我理解这个问题，我希望这会有所帮助！

编辑：我重新阅读了这个问题，并认为更好的解决方案是将position: relative;添加到包装器中。现在，您的绝对位置元素相对于视口定位。如果您提供wrapper相对定位，则会导致imageright相对于wrapper定位。

Answer 2

你可以将overflow:hidden;应用于身体，这就是你如何得到你所追求的，但这是非常不可取的。使div“流出”的另一种方法是使其成为position: fixed;，但这意味着当您向下滚动时它将是可见的。

浮动元素正确避免滚动条

2 个答案: