个人中心
gpt4 book ai didi

CSS:如何让position:absolutediv在位置内:相对div不会被溢出裁剪:隐藏在容器上

转载 作者：数据小太阳 更新时间：2023-10-29 09:06:09 26 4
gpt4 key购买 nike

我有 3 个级别的 div:

  • (下方为绿色) 顶级 div 具有 overflow: hidden。这是因为我希望该框内的某些内容(此处未显示)在超出框的大小时被裁剪掉。
  • (下图为红色) 在其中，我有 div 和 position: relative。唯一的用途是用于下一个级别。
  • (下面的蓝色部分) 最后一个 div 我用 position: absolute 从流中取出，但我想相对于红色 div(不是页面)。

我想让蓝色框从流程中取出并扩展到绿色框之外，但相对于红色框定位，如下所示:

但是，通过下面的代码，我得到:

并且移除红框上的position: relative，现在蓝框可以离开绿框，但不再相对于红框定位:

有没有办法:

  • 将 overflow: hidden 保持在绿色框上。
  • 蓝色框是否扩展到绿色框之外并相对于红色框定位？

完整来源:

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}
<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>

最佳答案

一个有效的技巧是使用 position: absolute 而不是 position: relative 定位框 #2。当我们想要一个带有 position: absolute 的内盒(这里是 box #3)被定位时，我们通常会在外盒(这里是 box #2)上放置一个 position: relative相对于外箱。但请记住:要使 box #3 相对于 box #2 定位，只需定位 box #2 即可。通过此更改，我们得到:

下面是这个改动的完整代码:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            /* Positioning */
            #box1 { overflow: hidden }
            #box2 { position: absolute }
            #box3 { position: absolute; top: 10px }

            /* Styling */
            #box1 { background: #efe; padding: 5px; width: 125px }
            #box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
            #box3 { background: #eef; padding: 2px; width: 75px; height: 150px }

        </style>
    </head>
    <body>
        <br/><br/><br/>
        <div id="box1">
            <div id="box2">
                <div id="box3"/>
            </div>
        </div>
    </body>
</html>

关于CSS:如何让position:absolutediv在位置内:相对div不会被溢出裁剪:隐藏在容器上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2243245/

26 4 0
文章推荐： internet-explorer - 使 Adob​​e 字体在 IE9 中与 CSS3 @font-face 一起工作
文章推荐： Django 表单中的 CSS 样式
文章推荐： css - 如何在 AngularJS 中包含 View /部分特定样式？
文章推荐： CSS "color"与 "font-color"
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com