webbasic之相对定位绝对定位固定定位

Posted 野生猿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webbasic之相对定位绝对定位固定定位相关的知识,希望对你有一定的参考价值。

1.相对定位

-以自己为目标

-较小的偏移

-不脱离队伍(流)//位置不会释放

  position:relative

  left:值

  right:值

<!doctype html>
<html>
  <head>
     <meta charset="utf-8"/>
     <title>照片墙</title>
     <style>
        /*先刷墙*/
        body{
          background-color:#088;
        }
        /*再摆照片*/
        ul{
        width:780px;
        margin:20px auto;
        border:1px solid red;
        /*去掉符号*/
        list-style-type:none;
        }
        li{
          width:218px;
          padding:10px;
          margin:10px;
          border:1px solid #ccc;
          float:left; //左浮动保证图片正序排列
          background-color:#fff;
        }
        p{
         text-align:center;
        }
        /*使用相对定位实现照片抖动的效果*/
        li:hover{
          position:relative;
          left:2px;//以li左边界为基准,向右偏移2个像素
          top:-2px;//以li上边界为基准,向上偏移2个像素
        }
     </style>
  </head>
  <body>
     <ul>
       <li>
         <img src="../images/01.jpg"/>
         <p>轻轻地我走了</p>
       </li>
       <li>
         <img src="../images/02.jpg"/>
         <p>正如我轻轻地来</p>
       </li>
       <li>
         <img src="../images/03.jpg"/>
         <p>我轻轻地招手</p>
       </li>
       <li>
         <img src="../images/04.jpg"/>
         <p>作别西天的云彩</p>
       </li>
       <li>
         <img src="../images/05.jpg"/>
         <p>那河畔的青柳</p>
       </li>
       <li>
         <img src="../images/06.jpg"/>
         <p>是夕阳中的新娘</p>
       </li>
     </ul>
 
  </body>
</html>

2.绝对定位

-以父辈为目标

  带有position的父辈,如果没有position,则以body为目标,如果多个父辈带position

  以最近的父辈为目标

-较大的偏移

-脱离流(队伍)//位置会释放

position:absolute

left:值

top: 值

绝对定位实例:

<!doctype html>
<html>
  <head>
     <meta charset="utf-8"/>
     <title>新闻图片</title>
     <style>
         div{
           border:1px solid red;
           width:390px;
           height:258px;
           /*设置定位属性,为了子元素以该div为目标做绝对定位*/
           position:relative;
         }
         /*绝对定位*/
         p{
           position:absolute;
           top:0;
           left:0;
           margin:0;
           width:100%;
           text-align:center;
           line-height:30px;
           background-color:#ccc;
         }
     </style>
  </head>
  <body>
     <div>
        <img src="../images/2.jpg"/>
        <p>小李子终获小金人</p>
     </div>
  </body>
</html>

3.固定定位

-以窗口为目标

-巨大的偏移

-脱离流(队伍)

-永远挂在窗口上,无论如何滚动,都在那

position:fixed

left:值

right:值

<!doctype html>
<html>
  <head>
     <meta charset="utf-8"/>
     <title>demo</title>
     <style>
        div{
          width:50px;
          line-height:30px;
          text-align:center;
          background-color:#ccc;
          /*固定定位*/
          position:fixed;
          bottom:10px;//以窗口的底边为基准,向上偏移10个像素
          right:5px;//以窗口的右边为基准,向左偏移5个像素
        }
     </style>
  </head>
  <body>
     <div>
       <a href="#">TOP</a>//浏览器窗体顶部的锚点没有name
     </div> 
    <h1>iphone SE</h1>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p></p>
 
  </body>
</html>

以上是关于webbasic之相对定位绝对定位固定定位的主要内容,如果未能解决你的问题,请参考以下文章

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流?

讲讲相对定位、绝对定位、固定定位的理解?

[Web 前端] 019 css 定位之绝对定位与相对定位

CSS绝对定位与相对定位的区别?

相对定位绝对定位固定定位区别

相对定位 and 绝对定位 and 固定定位