CSS-隐藏元素在屏幕右侧

前端之家收集整理的这篇文章主要介绍了CSS-隐藏元素在屏幕右侧前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个div,我想要部分放置在屏幕以外:
div{
    position: absolute;
    height: 100px;
    width: 100px;
    right: -50px;
    top: 50px;
}

但是这会增加页面的大小,允许将其向右滚动.
有没有办法保留这个div的一半隐藏,并阻止滚动来查看它?

解决方法

是的,只需创建一个包含overflow的div:hidden,就像这样:
.outer {
  overflow: hidden;
  position: relative;
}
.inner {
  position: absolute;
  height: 100px;
  width: 100px;
  right: -50px;
  top: 50px;
}
<div class="outer">
  <div class="inner">
    CONTENT
  </div>
</div>

编辑:我忘了添加位置:相对于亚历克斯·阿克曼指出的.outer div

示例:http://jsfiddle.net/Uj3eQ/

猜你在找的CSS相关文章