CSS定位--绝对定位是根据谁定位的？

最新推荐文章于 2023-04-11 16:51:15 发布

Wendy Bryant

最新推荐文章于 2023-04-11 16:51:15 发布

阅读量1.5k

点赞数 1

分类专栏： css 文章标签： html css 定位 html5

本文链接：https://blog.csdn.net/WenDy18cm/article/details/114942802

版权

CSS的绝对定位，你真的明白吗？

绝对定位是相对于谁确定位置的？有一句口诀：子绝父相，子绝父绝。意思就是，开启了绝对定位的子元素根据它的开启了相对定位或者绝对定位的父元素而确定位置。
事实上，绝对定位的元素是根据包含块确定位置的，包含块就是离他最近的开启了定位的祖先元素。
但是，如果祖先元素没有开启过定位，那就相对于初始包含块定位

什么是初始包含块？上代码！

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        
        html {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 100px 0 0

最低0.47元/天解锁文章

Wendy Bryant

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS定位--绝对定位是根据谁定位的？

绝对定位是相对于谁确定位置的？有一句口诀：子绝父相，子绝父绝。意思就是，开启了绝对定位的子元素根据它的开启了相对定位或者绝对定位的父元素而确定位置。事实上，绝对定位的元素是根据包含块确定位置的，包含块就是离他最近的开启了定位的祖先元素。但是，如果祖先元素没有开启过定位，那就相对于初始包含块定位什么是初始包含块？上代码！<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"&g
复制链接

扫一扫