定位、定位与浮动、锚点

最新推荐文章于 2024-07-22 21:44:46 发布

2301_740097890

最新推荐文章于 2024-07-22 21:44:46 发布

阅读量105

点赞数 1

文章标签： html 前端 css

本文链接：https://blog.csdn.net/2301_76892837/article/details/129464549

版权

<!--

定位：

概念：让元素去某一个位置，去到任意一个你指定的位置

属性：position

取值：

static---------静态定位，元素正常显示(默认值)

relative-------相对定位，相对于自己原有的位置行进位置的改变

参照物：自已原有的位置（常用于位置的微调）

absolute-------绝对定位

父子关系中：

1、如果父元素没有定位，此时子元素绝对定位，参照物是浏览器窗口第一屏幕(保证页面有滚动条)

2、如果父元素有定位，此时子元素绝对定位，子元素位置改变，参照物是父元素（找离自己最近的有定位的元素）

父元素通常使用的定位是相对定位，称之为父相子绝

父元素只要有定位即可（不是静态定位就可以）

fixed---------固定定位，参照物就是浏览器窗口

sticky--------粘性定位，用来实现吸顶效果,参照物是距离最近的有滚动条的容器

位移属性：

元素定位后，需要配合位移属性才能更改元素的位置

top/left/right/bottom

位移属性取值为正数，向元素正中心方向移动

位移属性取值为负数，向元素四周发散方向移动

定位带来的影响：

1、相对定位：

兄弟关系中，元素添加相对定位，后面定位元素会遮盖前面定位元素，产生层叠性

如果想要调整层级关系，需要使用层叠属性

z-index:数值；

默认值：auto；等同于0

取值可以为正数，也可以是负数，数值越大层级越高

注意：z-index只能应用在定位元素上面

2、绝对定位：

1)元素添加绝对定位，会脱离文档流，在页面中不占位置，后面不定位元素会自动补位

2)兄弟关系中，元素添加绝对定位，后面定位元素会遮盖前面定位元素，产生层叠性

如果想要调整层级关系，需要使用层叠属性

z-index:数值；

默认值：auto；等同于0

取值可以为正数，也可以是负数，数值越大层级越高

注意：z-index只能应用在定位元素上面

3、固定定位：

1)元素添加固定定位，会脱离文档流，在页面中不占位置，后面不定位元素会自动补位

2)兄弟关系中，元素添加固定定位，后面定位元素会遮盖前面定位元素，产生层叠性

如果想要调整层级关系，需要使用层叠属性

z-index:数值；

默认值：auto；等同于0

取值可以为正数，也可以是负数，数值越大层级越高

注意：z-index只能应用在定位元素上面

定位与浮动：

区别：

元素添加浮动是半脱离文档流，后面补位元素中的文本内容不会被覆盖，会实现文本环绕效果

元素添加绝对定位是完全脱离文档流，后面补位元素中的文本内容会被覆盖，不会实现文本环绕效果

相同点：

1、如果补位元素中没有文本内容，效果相同

2、都会改变元素类型，变成块元素

3、都可以解决父子关系中，子元素的margin-top作用在父元素上面的问题

如何实现元素水平垂直居中？

1、元素在浏览器窗口水平垂直居中

div{

width:600px;

height:400px;

background-color: red;

position: fixed;

top:50%;

left:50%;

margin-top: -200px;

margin-left: -300px;

}

2、元素在盒子中水平垂直居中

    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:1000px;
            height:800px;
            background-color: red;
            margin:100px auto;
            position: relative;
        }
        .inner{
            width:400px;
            height:400px;
            background-color: green;
            position: absolute;
            top:50%;
            left:50%;
            margin-top:-200px;
            margin-left:-200px;
        }
    </style>


<body>
    <div class="box">
        <div class="inner"></div>
    </div>
</body>

锚点：

用途：在当前页面不同区域进行跳转

应用场景：小说章节目录跳转、通讯录区域

语法：

<div id="锚点名"></div>（注意：不能使用class，只能使用id）

锚点名是我们自己起的

<!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>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style: none;
        }
        .list{
            width:100px;
            height:210px;                                                                                                                                                         
            position: fixed;
            top:100px;
            left:100px;
        }
        .list li{
            line-height:30px;
            text-align: center;
            border:1px dashed red;
        }
        div{
            width:1000px;
            height:800px;
            border:5px solid blue;
            margin:0 auto;
            font-size: 80px;;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>
            <a href="#box1"> 第一章</a>
        </li>
        <li>
            <a href="#box2">第二章</a>
        </li>
        <li>
            <a href="#box3">第三章</a>
        </li>
        <li>
            <a href="#box4">第四章</a>
        </li>
        <li>
            <a href="#box5">第五章</a>
        </li>
        <li>
            <a href="#box6">第六章</a>
        </li>
        <li>
            <a href="#box7">第七章</a>
        </li>
    </ul>
    <div id="box1">
        111言情小说之霸道总爱上我-----第一章：回国
    </div>
    <div id="box2">
        222若此优秀的倪勇遇到了真命天女，早上去上班我的车被追尾了，下来一看是个白富美，就这样我一见钟情了。。。
    </div>
    <div id="box3">
        333早上来到公司，发现白富美是我的上级领导，就此展开了不懈的追求。。。。
    </div>
    <div id="box4">
        444幸运的事，公司马上开年会了，就这样我们就在一起了。。。。
    </div>
    <div id="box5">
        555在一起的时光也太幸福了，但是突然有一天发生不不行的事情。。。。。
    </div>
    <div id="box6">
        666原来是她有隐瞒我的事情，这些事情我接受不了。。。。。
    </div>
    <div id="box7">
        777到底什么事情呢？请看下集，未完待续。。。。。
    </div>
</body>
</html>

-->