18、定位属性 · HTML+CSS学习笔记

定位就是通过有关定位的属性来明确设定一个盒子的在以下两个方面的位置： 1，在（x,y）平面上所处位置。 2，在高度（z轴）方向的位置（层次）。这是相对于一个盒子的“自然位置”和“浮动位置”而言的。自然位置就是所谓的正常的文档流所确定的位置。浮动位置就是由于浮动的特性而确定的位置。 ## 18.1.1定位方式属性position position用于设定一个元素的位置按什么方式来确定。通俗说就是设定元素“放在哪个位置”（可由4个定位属性确定：top，left, right, bottom）。有如下4个值可用： static：静态定位（其实就是没有定位）是一个元素的默认定位方式，也就是一个文档中元素的正常文档流所确定的定位。对其给定定位位置（top，left, right, bottom）的值无效。 relative：相对定位相对于其本来应该所处的位置而设定一个相对性定位。需给定位置（top，left, right, bottom） absolute：绝对定位相对于其上层最近的一个非static定位元素而设定的一个绝对性定位。需给定位置（top，left, right, bottom）；而如果其所有上级都没有非static定位元素，就相对于窗口来定位——手册上说的相对于body，是不准确的！ fixed：固定定位相对于当前网页窗口而设定的一个绝对性定位。需给定位置（top，left, right, bottom）。注意： 1，relative定位虽然会改变元素的位置，但不影响上级盒子和相邻盒子该有的正常宽高和位置。 2，absolute定位和fixed定位的元素脱离了文档流，也就是上级盒子中不会计算其宽高（像没有一样） ## 18.1.2.定位位置属性：top，left，right，bottom 就是对于3种定位方式（relative， absolute， fixed），所给定的具体位置值。可以是使用距离“上”，“左”，“下”，“右”各多少来定。比如： ``` .cc1{ position: absolute; left: 5px; top: 10px; } ``` 注意：top和bottom不能同时用；left和right不能同时用！ ## 18.1.3.层叠属性z-index 含义：就是将一个元素（盒子）默认情况下所展示在的那个平面（就是屏幕所在面）的垂直线当做z轴方向（就是眼睛盯屏幕时的那个“视线”方向），朝眼睛方向为z轴的正方向。则z-index可以设定一个元素（盒子）在z轴方向的“叠放层次”的高低，用整数表示。越大值表示越高，也就是离眼睛越近，自然就会覆盖住比它低的其他盒子。如下图所示： ![](https://img.kancloud.cn/d6/bf/d6bfc09370f48be9117757a4a18a657d_462x302.png) ``` <style> .box{ border:solid 1px red; width:300px; height:200px; position: relative; } .box .box1{ background: yellow; width:100px; height:100px; z-index:10; position: relative; left:10px; top:10px; } .box .box2{ background: blue; width:60px; height:50px; z-index:6; position: relative; } .box .box3{ background: green; width:80px; height:30px; z-index:3; position: relative; } </style> </head> <body> <div class="box"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </div> ```