0
点赞
收藏
分享

微信扫一扫

元素设置了绝对定位和固定定位后,注意设置元素的宽度和高度

夏沐沐 2022-03-30 阅读 41
<!DOCTYPE html>
<html lang="en">
<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>
        div{
        /* position: absolute; */
        background: orange;
        }
    </style>
</head>
<body>
    <div>111</div>
</body>
</html>

未设置absolute之前宽度是100%;
在这里插入图片描述
设置了absolute之后:

<!DOCTYPE html>
<html lang="en">
<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>
        div{
        position: absolute;
        background: orange;
        }
    </style>
</head>
<body>
    <div>111</div>
</body>
</html>

在这里插入图片描述
宽度由内容撑开,若想实现全屏宽度,记得设置宽度:

  div{
        position: absolute;
        background: orange;
        width: 100%;
        }

在这里插入图片描述
而:固定定位一样的,因为它是特殊的绝对定位!

举报

相关推荐

0 条评论