css-定位

最新推荐文章于 2024-07-08 16:10:56 发布

ciao-lk

最新推荐文章于 2024-07-08 16:10:56 发布

阅读量49

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_53854631/article/details/115383158

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

定位

在没有浮动和定位之前，浏览器在渲染显示标签时，依赖标签默认的文档流进行自动排列，此时grnju在不影响默认文档流的前提下，标签的位置变化只取决于其display属性、标签自身的margin或者标签的父级标签的padding。display如果为block则标签默认垂直排列， display如果为inline或者inline-block则标签水平排列（前提是预期相邻的标签如果要水平排列，则他们的display属性要同时修改为inline或者inline-block）。如果标签修改自身的margin-left或者margin-top可以让标签自己产生移动，如果标签修改其margin-right或者margin-bottom则其让相邻的右边或者下边的标签产生移动。如果父级标签修改了padding标签，也可以让子标签产生位置上的变化。实际项目中根据需要灵活运用margin和padding

static

static为静态定位，HTML的每一个标签默认的定位方式都是static，此时static定位方式的标签在位置上的变化不依赖left，top、right、bottom四个方向上的属性值，只跟该标签在文档流中的顺序以及其margin和父级标签的padding有关（position属性的默认值）

relative

relative为相对定位，此事left、right、top、bottom可以去修改定位后的元素位置。
而相对定位的特点：元素会根据其原来的位置进行移动。相对定位的元素不影响与其相邻的其它元素的位置。即：该定位元素不脱离原来的文档流。其移动前的位置依然存在。

absolute

absolute为绝对定位。可以通过left、right、top、bottom修改位置。如果一个标签设置为绝对定位，则该标签会脱离原来的文档里，即原来的位置将会被相邻的标签占据。因为脱离文档流则可能导致（清除浮动）。参考absolute究竟依托什么定位。HTML我们得知。
使用绝对定位的标签，在发生移动时会直接查找父级标签有无static之外的其他定位模式设置，如果有则依托设置了新定位模式的父级标签，如果没有则依托整个页面做定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>absolute究竟依托什么定位</title>
    <style>
        .parent {
            width: 400px;
            height: 200px;
            background: skyblue;
            margin: 80px auto;
            position: absolute;
        }
        .child {
            width: 50px;
            height: 50px;
            background: black;
            position: absolute;
            left: 100px;
            top: 20px;
        }
    </style>
</head>
<body>
    <!-- 如果一个标签设定其定位模式为绝对定位，此时该标签通过left、right、top、bottom
        如果设定其新位置时，该标签会向其父级标签查找父级标签上有没有设定定位模式为static
        之外的其他模式。如果有，则子标签就依赖父级标签的位置和大小做定位。如果都没有，则
        继续向上一级查找有无static之外的其他定位方式的父级标签。如果父级层级上均没有设置，
        则该标签依赖HTML即整个页面做定位。 -->
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

fixed

fixed定位模式为固定定位，固定定位的特点为，如果一个标签设置为固定定位，则会脱离原来的文档流，其原来的位置会被相邻的其它元素占据。同时也可以配合left、right、top、bottom四个方向的值来为标签定位。固定定位是依赖浏览器窗口定位的，所以当页面产生横向或纵向滑动时，该标签因为浏览器窗口定位，所以可以产生一个固定效果。页面滑动该标签不动。常用场景为门户网站的导航头部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fixed的定位模式的应用</title>
    <style>
        .header{
            width: 100%;
            height: 60px;
            background: rgba(0, 0, 0, 0.7);
            position: fixed;
            top: 0;
        }
        .content{
            width: 70%;
            height: 2000px;
            background: orange;
            margin: 0 auto;
            margin-top: 70px;
        }
        .footer{
            width: 100%;
            height: 80px;
            background: green;
        }
        body{
            margin: 0;
            padding: 0;
            font-size: 0;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>
</html>

stikcy

sticky定位模式为动态固定定位。即如果一个标签设定了sticky模式，同时配合top、left、right、bottom值来设定其距离浏览器窗口四个边的距离，一般设置为0.此时会产生如下效果。如果页面滑动时该标签起初跟随页面滑动，如果滑动中该标签的边与设定方向上的浏览器窗口的边的距离与设定的值一致或者开始小与设定的值，此时该标签表现为固定在浏览器窗口上。所以sticky标签跟随页面滑动时拥有relative的效果，固定在窗口时拥有fixed效果。常有的场景标签为页面的标签或者工具栏（toolbar）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sticky定位模式的应用</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-size: 0;
        }
        .box {
            width: 70%;
            height: 1800px;
            margin: 0 auto;
        }
        .box1 {
            background: orange;
        }
        .box2 {
            background: skyblue;
        }
        .toolbar {
            width: 100%;
            height: 60px;
            background: rgba(0, 0, 0, 0.6);
            position: sticky;
            top: 0;
            }

    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box toolbar"></div>
    <div class="box box2"></div>
    
</body>
</html>

ciao-lk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-定位

定位在没有浮动和定位之前，浏览器在渲染显示标签时，依赖标签默认的文档流进行自动排列，此时grnju在不影响默认文档流的前提下，标签的位置变化只取决于其display属性、标签自身的margin或者标签的父级标签的padding。display如果为block则标签默认垂直排列， display如果为inline或者inline-block则标签水平排列（前提是预期相邻的标签如果要水平排列，则他们的display属性要同时修改为inline或者inline-block）。如果标签修改自身的margin-le
复制链接

扫一扫