css定位笔记

一.定位：

　　1.position 属性：定位网页元素

　　(1) position：staic ; 表示默认，没有定位

　　(2) position:relative; 即相对定位，相对自身原来位置作为基准进行偏移

　（3 position:absolute; 即绝对定位，需要在父级样式中设置position的值不可为默认值，且是以浏览器或者父级盒子边缘作为基准进行偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #picture{
            position: relative;
            width: 430px;
        }
        ul li{
            list-style: none;
            float: left;
            border: 1px solid red;
            margin-right: 10px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
        }
        ul:after{
            content: '';
            display: block;
            clear: both;
        }
        ul{
            position: absolute;
            right: 10px;
            bottom: -10px;
        }
    </style>
</head>
<body>
<div id="picture">
<img src="image/adver-01.jpg" alt="">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>
</html>

　 (4) position: fixed; 固定定位，在浏览器显示时不随滚动条滑动而改变位置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>fixed的使用</title>
    <style>
        body{
        height: 1000px;
        }
        div:nth-of-type(1) {  /*第一个div设置绝对定位*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2) {  /*第二个div设置固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

2. z-index属性应用：调整元素定位时重叠层的上下位置，值为正数，默认值为0 ，例：

.tipText{
    color:#FFF;
    text-align:center;
    z-index:1
            }

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
<title>z-index属性</title>
  <style>
    ul, li {
      padding:0px;
      margin:0px;
      list-style-type:none;
    }
    #content {
      width:331px;
      overflow:hidden;
      padding:5px;
      font-size:12px;
      line-height:25px;
      border:1px #999 solid;
    }
    #content ul {
      position:relative;
    }
    .tipBg, .tipText {
      position:absolute;
      width:331px;
      height:25px;
      top:100px;
    }
    .tipText {
      color:#FFF;
      text-align:center;
      /*z-index:1;*/
    }
    .tipBg {
      background:#000;
      opacity:0.5;
      filter:alpha(opacity=50);
    }
  </style>
</head>
<body>
<div id="content">
  <ul>
    <li><img src="image/maple.jpg"  alt="香山红叶" /></li>
    <li class="tipText">京秋魅力&#8226;相约共赏香山红叶</li>
    <li class="tipBg"></li>
    <li>时间：11月16日 星期六 8:30</li>
    <li>地点：朝阳区西大望路珠江帝景K区正门前集合</li>
  </ul>
</div>
</body>
</html>

　　　　设置层的透明度：opacity:0.4; 值为0~1，值越小越透明； filter:alpha(opacity=40); 例：

.tipBg {
      background:#000;
      opacity:0.5;
      filter:alpha(opacity=50);
    }

猜你喜欢