零基础学前端之定位

Posted tea_year

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了零基础学前端之定位相关的知识，希望对你有一定的参考价值。

1、定位

把元素根据我们需要放在指定的位置，即定位。

以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。

所以︰

  • 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

  • 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位:将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位模式通过css样式的position属性来进行设置，有四个取值：

值语义
static静态定位
relative相对定位
absulute绝对定位
fixed固定定位

2、固定定位

脱离标准流，把元素固定到指定的页面位置，不论浏览器上下怎么翻动，被固定的元素随着浏览器的滚动而滚动，就像你看到的讨厌的广告一样，不论你怎么翻页，他一直在哪里。

语法：

选择器{
	position:fixed
}

写完上述属性值以后，可以直接设置top值，或left，right，bottom值，这些值就是以页面左上角为圆点上左右下的距离。如果想在右下，就设置bottom：0；right:0;这种直接下上下左右的属性后面赋值，只对定位起作用。

主要用于页面广告

例：

​ .box{
width: 200px;
height: 200px;
background-color: red;
position: fixed;
/top: 80px;/
left: 0;
bottom: 0;
/right: 80px;/
​ }

元素的位置相对于浏览器窗口是固定位置，即固定在在浏览器上，即使窗口是滚动的它也不会移动
Fixed定位使元素的位置与文档流无关，因此不占据空间

如图，给绿色的div添加固定定位后，不会随着屏幕的滚动而发生变化，绿色的div固定在了图中的位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d9eqXNoK-1629718196321)(\\asseits\\固定定位.png)]

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .fix{
            width: 200px;
            height: 400px;
            background-color: green;
            position: fixed;
            left: 800px;
            top: 100px;
        }

    </style>
</head>
<body>
    <div class="fix"></div>
    <h1>我是第1个h1标签</h1>
    <h1>我是第2个h1标签</h1>
    <h1>我是第3个h1标签</h1>
    <h1>我是第4个h1标签</h1>
    <h1>我是第5个h1标签</h1>
    <h1>我是第6个h1标签</h1>
    <h1>我是第7个h1标签</h1>
    <h1>我是第8个h1标签</h1>
    <h1>我是第9个h1标签</h1>
    <h1>我是第10个h1标签</h1>
    <h1>我是第11个h1标签</h1>
    <h1>我是第12个h1标签</h1>
    <h1>我是第13个h1标签</h1>
    <h1>我是第14个h1标签</h1>
    <h1>我是第15个h1标签</h1>
    <h1>我是第16个h1标签</h1>
    <h1>我是第17个h1标签</h1>
    <h1>我是第18个h1标签</h1>
    <h1>我是第19个h1标签</h1>
    <h1>我是第20个h1标签</h1>
    <h1>我是第21个h1标签</h1>
    <h1>我是第22个h1标签</h1>
    <h1>我是第23个h1标签</h1>
    <h1>我是第24个h1标签</h1>
    <h1>我是第25个h1标签</h1>
    <h1>我是第26个h1标签</h1>
    <h1>我是第27个h1标签</h1>
    <h1>我是第28个h1标签</h1>
    <h1>我是第29个h1标签</h1>
    <h1>我是第30个h1标签</h1>
</body>
</html>

3、相对定位 -重要

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

以自我为中心，自恋型选手

不脱离标准流，会随着浏览器的滚动而滚动。设置完定位以后，元素会随着设置的值发生变化，但是最初所占的位置还在，不会被下面元素顶上去

语法：

选择器：{
		position：relative;
	}

如果只对相对定位设置定位值，那么参照的原点是元素本身的左上角为原点。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ZvOU4bx-1629718196324)(\\asseits\\1615453504038.png)]

相对定位不脱离标准流：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2HagANAB-1629718196325)(\\asseits\\相对定位.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .a{
            width: 100px ;
            height: 200px;
            /* margin: 40px; */
            background-color: rgb(235, 92, 92);
            position: relative;
            top: 100px;
            left: 100px;
        }

        .b{
            width: 100px ;
            height: 200px;
            /* margin: 40px; */
            background-color: rgb(113, 226, 21);
            float: left;
            border: 1px solid black;
            
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="b"></div>
</body>
</html>

4、绝对定位

脱离标准流。

语法：

选择器：{
	position：absolute;
}

使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位

绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f7Tf9Kt9-1629718196328)(C:\\Users\\Administrator\\Desktop\\html_md课件\\9、定位\\笔记\\asseits\\绝对定位.png)]

如图，黄色div是绿色div的父元素，给绿色div加一个absolute属性，如果绿色div的父元素没有添加任何定位，那么移动绿色div的坐标原点将从浏览器的左上角开始，如果绿div的父元素有任意定位，那么以该定位的父元素的左上角原点为标准

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        h1{
            width: 272px;
            margin: 0 auto;
        }
        .out{
            width: 200px;
            height: 200px;
            background-color: rgb(241, 148, 7);
            position: relative;
            margin: 0 auto; 
        }

        .fix{
            width: 80px;
            height: 200px;
            background-color: green;
            position: absolute;
            left: 80px;
            top: 100px;
        }

    </style>
</head>
<body>
    <div class="out">
        <div class="fix"></div>
    </div>
    
    <h1>我是第1个h1标签</h1>
    <h1>我是第2个h1标签</h1>
    <h1>我是第3个h1标签</h1>
    <h1>我是第4个h1标签</h1>
    <h1>我是第5个h1标签</h1>
    <h1>我是第6个h1标签</h1>
    <h1>我是第7个h1标签</h1>
    <h1>我是第8个h1标签</h1>
    <h1>我是第9个h1标签</h1>
    <h1>我是第10个h1标签</h1>
    <h1>我是第11个h1标签</h1>
    <h1>我是第12个h1标签</h1>
    <h1>我是第13个h1标签</h1>
    <h1>我是第14个h1标签</h1>
    <h1>我是第15个h1标签</h1>
    <h1>我是第16个h1标签</h1>
    <h1>我是第17个h1标签</h1>
    <h1>我是第18个h1标签</h1>
    <h1>我是第19个h1标签</h1>
    <h1>我是第20个h1标签</h1>
    <h1>我是第21个h1标签</h1>
    <h1>我是第22个h1标签</h1>
    <h1>我是第23个h1标签</h1>
    <h1>我是第24个h1标签</h1>
    <h1>我是第25个h1标签</h1>
    <h1>我是第26个h1标签</h1>
    <h1>我是第27个h1标签</h1>
    <h1>我是第28个h1标签</h1>
    <h1>我是第29个h1标签</h1>
    <h1>我是第30个h1标签</h1>
</body>
</html>

5、绝对定位元素的应用

定位元素的原点是会发生变化的，情况有两种：

  1. 如果定位元素的祖辈元素没有任意定位，那么定位元素的原点就是就是浏览器的左上角。

  2. 如果定位元素的祖辈元素有过任意定位，那么定位元素的原点就是以该元素最近的祖辈元素的左上角为原点。

可以新建两个div，一个outBox，里面放一个inBox，然后在outBox里面不设置定位，尝试下设置inBox定位后的变化。然后给outBox设置一个定位，然后再看变化

子绝父相

6、做5173的导航条

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Oyz1lzx-1629718196332)(\\asseits\\5173.png)]

步骤：

1、建立大的div盒子，宽100% 设置背景，本次我们用图片设置背景

​ background: url(“img/repeat.png”) 0px -47px; 后面的两个值直接调整x轴和y轴，和我们昨天学习的background-position: 0px -47px;是一样的，这里是整合起来的写法

2、用ul li标签写，给ul设置成为版心

3、让li浮动起来，设置颜色格式，设置内边距

4、给li设置hover,此处的hover颜色也用背景图片

5、找到“热”这张图片，用定位的方法放在指定的位置

6、父亲用相对定位，因为这样不会脱离标准流，子类用绝对定位，这样可以一次设置不同的地方可重复使用。原理就是只要父类设置了任意定位，那么子类的定位就按照父类的左上角为原点来进行定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>5173导航条</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 35px;
           background-color: #3a83e8;
           margin: 50px 0;
        }
        .clearfix{
            clear: both;
            content: "";
            display: block;
        }
        .container{
            width: 70%;
            height: 35px;
            margin: 0 auto;
        }

        .container li{
            list-style: none;
            float: left;
            padding: 0 10px;
            line-height: 35px;
            font-size: 15px;
            font-weight: bold;
            color: white;
            position: relative;
        }
        #top1{
            background-color: #165fc1;
        }

        .container li:hover{
            background-color: #165fc1;
        }

        img{
            position: absolute;
            top: -16px;
            left: 49px;

            
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="container clearfix">
            <li id="top1">首页</li>
            <li>金币交易</li>
            <li>帐号交易</li>
            <li>装备交易</li>
            <li>手游交易
                <img src="img/sy_hot.png" alt="">
            </li>
            <li>游戏代练
                <img src="img/sy_hot.png" alt="">
            </li>
            <li>点卡交易</li>
            <li>帐号租赁
                <!-- <img src="img/sy_hot.png" alt=""> -->
            </li>
            <li>游戏陪玩
                <!-- <img src="img/sy_hot.png" alt=""> -->
            </li>
        </ul>


    </div>
</body>

</html>

7、z-index属性

层级相同的情况下，越在后面的元素层级越高。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q8VUKhgj-1629718196333)(\\asseits\\z-index.png)]

比如说，我们现在同时设置了1,2,3,4,5个div,如果我们现在给他们设置了相对定位，此时会脱标，所有的div都层叠在了一起，那么第5个在最上面，因为层级一样的时候，5在后面，程序最后读到他，所以他在上面。如果想设置让2在最上面，就可以给2设置一个z-index：值，的属性值。z-index的取值越大，层级越高，取值范围是正整数，最大值是2147483647，这个最大数不需要记，我们工作中只要不是瞎写，用不了这么大的数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        div{
            position: absolute;

        }
        .a{
            width: 500px;
            height: 500px;
            background-color: rgb(241, 54, 54);
        }

        .b{
            width: 400px;
            height: 400px;
            background-color: rgb(160, 241, 54);
            /* z-index: 2; */
        }

        .c{
            width: 300px;
            height: 300px;
            background-color: rgb(54, 141, 241);
            z-index: 1;
        }

        .d{
            width: 200px;
            height: 200px;
            background-color: rgb(241, 54, 110);
            z-index: 1;
        }

        .e{
            width: 100px;
            height: 100px;
            background-color: rgb(238, 241, 9);
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
</body>
</html>

8、选择器的优先级

标签选择器<类选择器<id选择器

当多个标签嵌套的时候，分辨优先级，可以理解为，一个标签选择器是1，类选择器是10，id选择器是100。多个嵌套时，按照加起来的数值，大的层级高。

200px;
background-color: rgb(241, 54, 110);
z-index: 1;
}

    .e{
        width: 100px;
        height: 100px;
        background-color: rgb(238, 241, 9);
    }
</style>
```

8、选择器的优先级

标签选择器<类选择器<id选择器

当多个标签嵌套的时候，分辨优先级，可以理解为，一个标签选择器是1，类选择器是10，id选择器是100。多个嵌套时，按照加起来的数值，大的层级高。

以上是关于零基础学前端之定位的主要内容，如果未能解决你的问题，请参考以下文章

零基础学前端之css3高级特效

零基础学前端之css3高级特效

零基础学前端开发技术之第七章 浮动塌陷

零基础学前端开发之CSS3深入选择器

零基础如何学WEB前端

从零开始学 Web 之 ES6ES6基础语法一