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

CSS position定位技术及应用

CSS position

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

一、position定位的值

relative 相对定位

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

absolute绝对定位

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

fixed 固定定位

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

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; }

是否在文档流中占位

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; }

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

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); }

什么时候使用定位

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

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

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

定位的案例（菜单）

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

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

<!DOCTYPE html>

  <html lang="en">

  <head>

    <meta charset="UTF-8">

    <title>Title</title>

  </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>

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

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

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

*

  {

    margin: 0;

    padding: 0;

    list-style: none;

}

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

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

.province

  {

    float: left;

    background-color: deepskyblue;

    padding: 10px 25px;

    position: relative;

}

1. 设置三角样式

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

- - 如果需要设置一个行内元素的宽高，我们需要先把他设置为行内块元素
  - 三角形一定要设置宽高都是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. 设置省份容器的位置

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

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

.provinceMenu

 {

     position: absolute;

     left:0;

right: 0;

     top:41px;

     display: none;

 }

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

.city

  {

    padding: 10px 0;

   

    text-align: center;

    background-color: deepskyblue;

}

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

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

li:hover

  {

    background-color: dodgerblue;

    cursor: default;

}

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

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

 .province:hover>.provinceMenu

  {

    display: block;

}

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

.province:hover>.triangle

  {

    transform: rotate(90deg);

}

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

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

CSS position定位技术及应用

CSS position

一、position定位的值

相关推荐

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