制作一个位置为绝对的元素伸出屏幕，而不引起水平溢出

问题描述 投票：0回答：1

我有一个圆圈用来装饰

<div class="circle">
    <img src="noun-dashed-circle-orange.svg" alt="">
</div>

.circle {
    width: 185px;
    height: 185px;
    position: absolute;
    top: 1430px;
    right: -96px;
}

当圆圈伸出屏幕时，我有溢出-x，但我不需要（水平滚动）。

我也不想溢出-x：隐藏；

圆圈就在里面

<body></body>

image of circle

html css position overflow
1个回答
0
投票

要使具有position:absolute的元素突出屏幕而不导致水平溢出，可以使用overflow属性和负边距的组合。以下是修改 HTML 和 CSS 的方法：





.container {
  position: relative;
  width: 100%;
  overflow-x: hidden; /* Hide horizontal overflow */
}

.circle {
  width: 185px;
  height: 185px;
  position: absolute;
  top: 1430px;
  right: -96px;
  margin-right: -96px; /* Compensate for right positioning */
}


   <div class="container">
<div class="circle">
    <img src="noun-dashed-circle-orange.svg" alt="">
</div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.