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

其他 2019-02-21 18:01:54 阅读次数: 0

☞☞☞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
<!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>
  1. CSS部分
    1. 首先设置通配符的样式

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

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

*

  {

    margin: 0;

    padding: 0;

    list-style: none;

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

.province

  {

    float: left;

    background-color: deepskyblue;

    padding: 10px 25px;

    position: relative;

}
    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. 设置省份容器的位置

      • 绝对定位，因为这个省份容器是相对省份的
      • 设置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. 设置鼠标经过时子菜单显示

 .province:hover>.provinceMenu

  {

    display: block;

}
    1. 设置鼠标经过时，子菜单三角旋转
.province:hover>.triangle

  {

    transform: rotate(90deg);

}

 

猜你喜欢

转载自blog.csdn.net/GUDUzhongliang/article/details/87864196
今日推荐
周排行
LRU cache算法
windows10, 自带的OpenSSH, key权限问题, 文件权限问题
测试用例书写方法
HIVE-默认分隔符的（linux系统的特殊字符）查看，输入和修改
最贵的AMD 7nm显卡来了！这设计 够狂野
java多线程简单demo
[ 转载 ]在Android系统上使用busybox——最简单的方法
QT connect学习
BFSIFT算法分析
Xcode10：library not found for -lstdc++.6.0.9 临时解决
每日归档
更多
2024-08-06(0)
2024-08-05(0)
2024-08-04(0)
2024-08-03(0)
2024-08-02(0)
2024-08-01(0)
2024-07-31(0)
2024-07-30(0)
2024-07-29(0)
2024-07-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022