绝对定位与隐藏溢出
P粉451614834
P粉451614834 2023-08-21 19:30:21
[HTML讨论组]

我们有两个DIV,一个嵌套在另一个里面。如果外部DIV没有设置为绝对定位,那么绝对定位的内部DIV将不会遵循外部DIV的溢出隐藏。


#first {
    width: 200px;
    height: 200px;
    background-color: green;
    overflow: hidden;
}

#second {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    left: 250px;
    top: 250px;
}
<div id="first">
    <div id="second"></div>
    <div id="third"></div>
</div>


有没有办法让内部DIV遵循外部DIV的溢出隐藏,而不设置外部DIV为绝对定位(因为这会破坏我们的整体布局)? 同时,对于我们的内部DIV来说,相对定位也不是一个选项,因为我们需要“突出显示”一个表格TD。


#first {
    width: 200px;
    height: 200px;
    background-color: green;
}

#second {
    width: 50px;
    height: 400px;
    background-color: red;
    position: relative;
    left: 0px;
    top: 0px;
}
<table id="first">
    <tr>
        <td>
            <div id="second"></div>
        </td>
    </tr>
</table>


还有其他选项吗?

P粉451614834
P粉451614834

全部回复(2)
P粉715304239

关于外部div使用position: relative呢?在隐藏内部div的例子中。由于没有指定top或left,它也不会在布局中移动。

P粉792026467

将外部的 <div> 设置为 position: relative,将内部的 <div> 设置为 position: absolute。这样应该适用于您。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号