Loading

CSS定位

定位

截图有误：2中是浮动变行级块

无论哪个定位坐标系的原点都是左上角,向右为正x,向下为正y.

默认static,无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的。

一:相对定位

相对自己原来的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .c1{
            background-color: green;
            height: 200px;
            width: 200px;
            /* position: relative;
            left:200px;
            top:200px; */
        }
    </style>
</head>
<body>
    <div class="c1">
    </div>
</body>
</html>

注释打开后,就会相对原来的位置进行移动.

图中是没有定位时的图片和相对定位后的图片结合的截图,从A点移动到了B点.

二:绝对定位

相对已经定位过的父标签,之所以用绝对定位是因为子标签不知道放什么位置,而是相对父标签来进行定位才能精确定位.

如果没有父标签作为基准,就会一直向上找直到body标签.

父标签加个定位属性,至于value随便,只要不用left这些属性来确定位置,定位不会有效果

然后子标签设置为绝对定位,left这些属性值相对于父标签开始换位置.按照父标签的左上角作为原点开始移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .c1{
            background-color: green;
            height: 200px;
            width: 200px;
            position: relative;
        }
        .c2{
            background-color: red;
            height: 200px;
            width: 200px;
            position: absolute;
            left:200px;
            
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2"></div>
    </div>
</body>
</html>
View Code

三:固定定位

相对于浏览器窗口

无论滚动滚动条,这个始终在浏览器的一个位置.例如返回顶部.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .c1{
            height: 200px;
            width:200px;
            background-color: red;
            position: fixed;
            bottom: 100px;
            right: 100px;
            
        }
    </style>
</head>
<body>
    <div class="c1">
        
    </div>
</body>
</html>
View Code

四:z-index

#i2 {
  z-index: 999;
}

设置对象的层叠顺序。

  1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
  2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
  3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
  4. 从父现象：父亲怂了，儿子再牛逼也没用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定义模态框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -300px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>
View Code

　opacity

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。改变的是标签的透明度,只要在标签里面的例如文字也会改

而rgb只会改背景颜色,其他改不了

综合示例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>li标签的float示例</title>
  <style>
    /*清除浏览器默认外边距和内填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a标签默认的下划线*/
    }

    .nav {
      background-color: black;
      height: 40px;
      width: 100%;
      position: fixed;
      top: 0;
    }

    ul {
      list-style-type: none; /*删除列表默认的圆点样式*/
      margin: 0; /*删除列表默认的外边距*/
      padding: 0; /*删除列表默认的内填充*/
    }
    /*li元素向左浮动*/
    li {
      float: left;
    }

    li > a {
      display: block; /*让链接显示为块级标签*/
      padding: 0 15px; /*设置左右各15像素的填充*/
      color: #b0b0b0; /*设置字体颜色*/
      line-height: 40px; /*设置行高*/
    }
    /*鼠标移上去颜色变白*/
    li > a:hover {
      color: #fff;
    }

    /*清除浮动 解决父级塌陷问题*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
<!-- 顶部导航栏 开始 -->
<div class="nav">
  <ul class="clearfix">
    <li><a href="">玉米商城</a></li>
    <li><a href="">MIUI</a></li>
    <li><a href="">ioT</a></li>
    <li><a href="">云服务</a></li>
    <li><a href="">水滴</a></li>
    <li><a href="">金融</a></li>
    <li><a href="">优品</a></li>
  </ul>
</div>
<!-- 顶部导航栏 结束 -->
</body>
</html>
View Code

五:总结

浮动的元素脱离文档流,位置会被别的标签抢去.

定位:

1.相对定位不会脱离文档流,位置不会被其他标签抢去.

2.绝对定位脱离文档流.

3.固定定位脱离文档流.

开发流程:先把html的结构搭起来,然后用css一个一个去调整.

 

posted @ 2019-10-11 11:56  浅忆尘  阅读(130)  评论(0)    收藏  举报