千锋H5教程系列—【CSS position定位技术及应用 】

☞☞☞2019年千锋教育最新视频课程-速速收藏☜☜☜

 

 

             CSS position定位技术及应用     

CSS position

Css中position定位是页面中用的较多的一种方法，但是不能滥用，如果到处使用position定位那么整个页面在宽高或者增删内容后都会乱掉。因此，我们必须要谨慎使用，那么到底什么时候我们才使用position定位呢，如果才能用好position定位？接下来我们就一点点分解。我们先来认识一下position定位

一、position定位的值

1. relative 相对定位

生成相对定位的元素，相对于其正常位置进行定位。注意，这里的相对值得是相对正常原来该有的位置

1. absolute绝对定位

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，如果不存在这样的父元素，则依据最初的包含块。根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。

1. fixed 固定定位

生成固定／绝对定位的元素，相对于浏览器窗口进行定位。

1. static 默认值。没有定位，元素出现在正常的流中.left,right,top,bottom,z-index都无作用

 

• position定位属性的比较
  1. 是否在文档流中

relative	不在文档流中. 我们发现相对定位后并不在文档流中，如果设置left或者top后，并没有把下面的图片向下挤，也就是说设置相对定位后，就与后面的内容没有关系了.	div {     width: 100px;     height: 100px;     position: relative;     left: 50px;     top: 50px;     background-color: chartreuse; }
absolute	脱离了文档流。这里使用绝对定位与上一个相对定位比较，我们可以看到也是脱离了文档流，不会把后续的内容向下挤。	div {     width: 100px;     height: 100px;     position: absolute;     left: 50px;     top: 50px;     background-color: chartreuse; }
fixed	脱离了文档流。这里使用绝对定位与上一个绝对定位比较一样，我们可以看到也是脱离了文档流，不会把后续的内容向下挤。	div {     width: 100px;     height: 100px;     position: fixed;     left: 50px;     top: 50px;     background-color: chartreuse; }
static	未脱离文档流,而且left和top没有起到效用后面的图片仍然会被这个div挤到下面	div {     width: 100px;     height: 100px;     position: static;     left: 50px;     top: 50px;     background-color: chartreuse; }

1. 是否在文档流中占位

 

relative	在文档流中仍然占有原来的位置下面的图片不会因为div的位置改变而上去，保证了原有的文档流的结构.	div {     width: 100px;     height: 100px;     position: relative;     left: 50px;     top: 50px;     background-color: chartreuse; }
absolute	不会占位，完全与页面中的后续内容没有任何关系。后续的内容会自动挤到上面来占有div原有位置。	div {     width: 100px;     height: 100px;     position: absolute;     left: 50px;     top: 50px;     background-color: chartreuse; }
fixed	不会占位，完全与页面中的后续内容没有任何关系。后续的内容会自动挤到上面来占有div原有位置。	div {     width: 100px;     height: 100px;     position: fixed;     left: 50px;     top: 50px;     background-color: chartreuse; }
static	会占位，后面的图片仍然会被这个div挤下来	div {     width: 100px;     height: 100px;     position: static;     left: 50px;     top: 50px;     background-color: chartreuse; }

 

1. 位置变化
2. 通过left，right，top，bottom拉伸元素
3. 图片剪切

relative	相对原有所在位置发生改变，向左向下偏移50像素.	div {     width: 100px;     height: 100px;     position: relative;     left: 50px;     top: 50px;     background-color: chartreuse; }
absolute	无父级元素，直接相对页面的最顶端定位	div {     width: 100px;     height: 100px;     position: absolute;     left: 50px;     top: 50px;     background-color: chartreuse; }
	有父级，但是父级没有任何position定位。向上找父级的父级是否有定位，如果都没有定位，仍然相对页面的最顶端定位
	有父级，并且父级是相对定位或者绝对定位或者固定定位，那么就是这个div的位置就是相对它父级的起始点定位了。因此通常我们要做绝对定位都会让父级做相对定位。这样这个内容就是响度这个父容器定位了。	#parent {     width: 200px;     height: 200px;     position: relative;     left: 100px;     top: 100px;     border: 1px solid #000000; } #div0 {     width: 100px;     height: 100px;     position: absolute;     left: 50px;     top: 50px;     background-color: chartreuse; }	可以看到有边线的大框就是div的父容器，做了相对定位左下移动100像素，div的位置就变成相对这个父容器的位置移动了50像素
fixed	相对浏览器窗口位置定位。滚动条滚动后，文档流中的内容随着滚动条改变而改变，但是固定定位的div位置不发生改变	div {     width: 100px;     height: 100px;     position: fixed;     left: 50px;     top: 50px;     background-color: chartreuse; }
static	位置不会发生任何改变	div {     width: 100px;     height: 100px;     position: static;     left: 50px;     top: 50px;     background-color: chartreuse; }

relative	设置相对定位后，不设置宽高的情况下，不会拉伸div的大小，因为这里是div独立一行，因此显示独占一行的宽度	div {    position: relative;    left:0;    top: 0;    right: 0;    bottom: 0;    background-color:    chartreuse; }
absolute	如果有父级，就会将div的宽度设置为父级的宽高100%，如果没有父级，就设置为页面宽高的100%	div {     position: absolute;     left:0; top: 0; right: 0; bottom: 0; background-color: chartreuse; }
fixed	设置为页面宽高的100%大小	div {     position: fixed;     left:0; top: 0; right: 0; bottom: 0; background-color: chartreuse; }
static	当前div的大小不发生宽高改变	div {     position: static;     left:0; top: 0; right: 0; bottom: 0; background-color: chartreuse; }

relative	不能图片剪切	img {     position: relative;     clip: rect(100px,200px,150px,100px); }
absolute	可以图片剪切	img {     position: absolute;     clip: rect(100px,200px,150px,100px); }
fixed	可以图片剪切	img {     position: fixed;     clip: rect(100px,200px,150px,100px); }
static	不能图片剪切	img {     position: static;     clip: rect(100px,200px,150px,100px); }

• 什么时候使用定位

1. 当多张图片产生堆叠时需要使用定位
2. 当子容器的位置是相对父容器确定位置，并且希望脱离文档流，与后面的内容完全没有关系时。
3. 当内容需要位移的时候
4. 当内容需要做裁切时
5. 当需要深度变化时
6. 当需要3D旋转时

等等，还有许多地方都需要大家发现使用。但是我们不能滥用，那么什么时候不能使用position定位呢？

1. 页面布局时不能使用
2. 影响后续内容位置的不能使用
3. 同行的行内元素不要使用定位

• 定位的案例（菜单）

1. HTML部分
   1. 一个ul做外容器class是menu
   2. Ul中设置多个li表示横向菜单省份，class是province
   3. 在第一个li和第二个li中再增加ul，这个是省份子菜单的容器，class是provinceMenu
   4. 在省份子菜单的容器中增加若干城市的li class是city
   5. 分别在省份的li中增加一个span，class是triangle

html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Titletitle> head> <body> <ul class="menu">     <li class="province">河北<span class="triangle">span>         <ul class="provinceMenu">             <li class="city">石家庄li>             <li class="city">保定li>             <li class="city">张家口li>             <li class="city">廊坊li>             <li class="city">邯郸li>         ul>     li>     <li class="province">山东<span class="triangle">span>         <ul class="provinceMenu">             <li class="city">济南li>             <li class="city">济宁li>             <li class="city">青岛li>             <li class="city">烟台li>             <li class="city">徐州li>         ul>     li>     <li class="province">河南li>     <li class="province">山西li>     <li class="province">北京li>     <li class="province">天津li> ul> body> html>

1. CSS部分
   1. 首先设置通配符的样式

因为在这里使用了ul因此，设置list-style:none，这样就会把所有ul的那个符号取消了

因为ul和li都有内外间距，因此，设置margin和padding的默认值都是0

* {     margin: 0;     padding: 0;     list-style: none; }

1. 1. 设置省份的菜单样式
      • 省份部分做左浮动，这样省份就会横向排列
      • 设置背景色蓝色
      • 设置左右间距是25像素，上下间距是10像素，这样不但把省份的空间撑开了，而且还有了背景色，如果使用margin撑开，间距部分就没有背景色了，如果设置宽度，里面文字如果较多，每省份名称的距离就会不一样了
      • 设置相对定位，因为里面的子菜单需要绝对定位

.province {     float: left;     background-color: deepskyblue;     padding: 10px 25px;     position: relative; }

1. 1. 设置三角样式

• • • 如果需要设置一个行内元素的宽高，我们需要先把他设置为行内块元素    
    • 三角形一定要设置宽高都是0
    • 设置位置的偏移是左偏7像素，下偏3像素
    • 三角形就要设置边线的3个边，直边需要设置颜色，斜边设置颜色是透明，线条的长度就是三角的大小        

.triangle {     display: inline-block;     width: 0;     height: 0;     margin-left: 7px;     margin-bottom: 3px;     border-top: 5px solid #000000;     border-left: 5px solid transparent;     border-right: 5px solid transparent; }

1. 1. 设置省份容器的位置

• • • 绝对定位，因为这个省份容器是相对省份的
    • 设置left是0，right是0又是绝对定位，意味着把当前这个ul的宽度拉伸到父级省份li的宽度的100%，这样城市的子容器才会扩大到这个省li的宽度
    • top41像素是相对文字块的父级容器的顶部有41像素
    • 隐藏这个省份菜单

.provinceMenu  {      position: absolute;      left:0; right: 0;      top:41px;      display: none;  }

1. 1. 设置城市子菜单的样式
      • 设置子菜单的padding是上下10像素，这样可以将每个城市垂直之间的位置推开
      • 设置文本水平居中对齐
      • 设置背景颜色

.city {     padding: 10px 0;        text-align: center;     background-color: deepskyblue; }

1. 1. 设置所有li，省份，城市的li鼠标经过时变色

设置了li鼠标经过时颜色变深，并且鼠标经过时是箭头默认样式

li:hover {     background-color: dodgerblue;     cursor: default; }

1. 1. 设置鼠标经过时子菜单显示

.province:hover>.provinceMenu {     display: block; }

1. 1. 设置鼠标经过时，子菜单三角旋转

.province:hover>.triangle {     transform: rotate(90deg); }