Html 如何隐藏屏幕边缘的元素？

我有一个div，我想在屏幕外部分定位，如下所示：

div{
    position: absolute;
    height: 100px;
    width: 100px;
    right: -50px;
    top: 50px;
}

---

但是这会增加页面的大小，允许它向右滚动。有没有办法隐藏此div的一半并防止滚动查看它？

是的，只需创建一个带有

溢出：隐藏的封闭div，如下所示：


.outer{
溢出：隐藏；
位置：相对位置；
}
.内部{
位置：绝对位置；
高度：100px；
宽度：100px；
右：-50px；
顶部：50px；
}

内容
只需在css中添加
溢出：隐藏。这应该可以解决问题。
只需将此div插入另一个div中，并使用
溢出：hidden
滚动可能是因为您已将相对位置属性放置到包含div，结果所需div向右偏移-50，但相对于主包含div，而不是浏览器可查看区域。。如果其父div正好位于body标记内，或者父div不包含任何position属性，则代码应该可以工作。。同样，您可以将overflow:hidden属性应用于wrapper div以隐藏不必要的部分
您可以添加媒体查询以避免在某个点滚动。因此，基本上是以主容器的宽度为基础，使用它创建一个最小宽度的媒体查询

@media (min-width: 960px) {
    body {
       overflow-x: hidden;
    }
}

应该适用于现代浏览器。
我也遇到过类似的情况，我需要将绝对放置的元素部分放置在主内容标题的右侧。如果浏览器足够宽，可以显示它，我不想剪辑它（overflow:hidden；），但如果浏览器不够宽，我也不想让滚动条出现

以下是我使用的代码：

@media screen and (max-width: 1275px) {
  #header {
     overflow-x: hidden;
  }
}

另一个解决方案是使用
左边距：100%

若你们想稍微调整一下定位，你们可以做一些类似于
marginleft:calc（100%+10px）

另一种方法是做
float:right然后玩
右边距-50px
其中50px是隐藏div的宽度。如果制作菜单，您甚至可以设置
右边距的动画，从而实现整洁的过渡。
添加位置：相对/固定/绝对；对于.outerNote：给定的代码将导致内部内容不会显示在屏幕上。您需要根据需要在文档中定位外部div，然后内部
位置：绝对
将与外部div相对。在这种情况下，您应该使用最大宽度而不是最小宽度。当浏览器小于或等于960px（最大宽度）时，您希望浏览器剪裁溢出，否则滚动条首先不存在。由于性能限制，设置布局相关属性的动画不是一个好主意。最好使用
transform:translateX（）
进行此类操作。@slavafomini不，设置页边距动画没有问题。甚至在手机上。与任何动画一样，这在很大程度上取决于你如何进行。这两种方法并排使用，除了一些小的缓解差异外，几乎完全相同。您甚至可以在开发工具中打开CPU配置文件，亲自查看：