零基础学前端之定位

客官°小女子只卖身不卖艺 2022-09-07 14:33 349阅读 0赞

# 1、定位 #

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

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

所以︰

*  浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
 *  定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

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

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

<table> 
 <thead> 
  <tr> 
   <th align="center">值</th> 
   <th align="center">语义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">static</td> 
   <td align="center"><strong>静态</strong>定位</td> 
  </tr> 
  <tr> 
   <td align="center">relative</td> 
   <td align="center"><strong>相对</strong>定位</td> 
  </tr> 
  <tr> 
   <td align="center">absulute</td> 
   <td align="center"><strong>绝对</strong>定位</td> 
  </tr> 
  <tr> 
   <td align="center">fixed</td> 
   <td align="center"><strong>固定</strong>定位</td> 
  </tr> 
 </tbody> 
</table>

# 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>帐号租赁
                    
                </li>
                <li>游戏陪玩
                    
                </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。多个嵌套时，按照加起来的数值，大的层级高。

发表评论取消回复

表情：

评论列表（有 0 条评论，349人围观）

还没有评论，来说两句吧...

相关阅读

相关零基础学前端（三）重点讲解 HTML

1. 该篇适用于从零基础学习前端的小白2. 初学者不懂代码得含义也要坚持模仿逐行敲代码，以身体感悟带动头脑去理解新知识3. 初学者切忌，不要眼花缭乱，不要四处找其它文档，...

亦凉/ 2024年04月22日 15:17/ 0 赞/ 109 阅读

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

知识点： 1.浮动塌陷的概念 2.浮动塌陷的解决 1：浮动塌陷的概念 <!DOCTYPE html> <html> <head>

系统管理员/ 2022年09月12日 07:46/ 0 赞/ 219 阅读

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

知识点： 1.并集选择器（多个） 2.交集选择器（组合选择器） 3.子代选择器 4.后代选择器 5.属性选择器 6.结构伪类选择器 7.伪元素选择器 8.案例作

﹏ヽ暗。殇╰゛Y/ 2022年09月11日 12:28/ 0 赞/ 269 阅读

相关零基础学前端开发之CSS基础

第三章：CSS3样式基础知识点： 1.CSS概念 2.CSS语法格式 3.CSS的使用 4.三类范围为什么使用CSS 化妆前： ![在这里插入图片描述][w

刺骨的言语ヽ痛彻心扉/ 2022年09月11日 03:20/ 0 赞/ 304 阅读

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

css3高级特效 1、本章目标掌握2D转换对元素进行移动、旋转、缩放和倾斜掌握在3D空间中改变元素的形状、位置和大小 2、2D转换方法移动：tran

Dear 丶/ 2022年09月08日 14:48/ 0 赞/ 323 阅读

相关零基础跟我学前端之css3基础

css3基础 1、本章目标掌握CSS3设置边框、背景、文本效果理解并会使用CSS3自定义字体 2、CSS3边框 border-radius 用于

约定不等于承诺〃/ 2022年09月08日 14:47/ 0 赞/ 243 阅读

相关零基础学前端之定位

1、定位把元素根据我们需要放在指定的位置，即定位。以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以︰浮动可以让多个块级盒子一行没有缝隙排

客官°小女子只卖身不卖艺/ 2022年09月07日 14:33/ 0 赞/ 350 阅读

相关零基础学前端.jQuery入门与实践教程

-------------------- 学习目标: 掌握编程jQuery的基本使用掌握jQuery插件的使用能够开发jQuery插件选择器、

￡神魔★判官ぃ/ 2022年09月03日 04:20/ 0 赞/ 294 阅读

相关零基础如何学 Web 前端开发

今天是2021年7月的最后一天，也是一个美好的周六啊，本来我是不打算发文的，毕竟难得有一个好的休息天，让自己忙碌的一周身心放松下来，打打游戏，看看小姐姐不香吗。但是呢，就是有一

小鱼儿/ 2022年08月29日 05:57/ 0 赞/ 341 阅读

相关前端、零基础

以下文章转载自知乎,暗灭-京华九月秋近寒，浮沉半生影长单. 【修真院“善良”系列之十八】WEB程序员从零开始到就业的全资料V1.0——只看这一篇就够了！ ![1240][]

怼烎@/ 2022年05月27日 04:25/ 0 赞/ 330 阅读