zoukankan      html  css  js  c++  java
  • 关于position的定位

    1.固定定位position:fixed;

    相对于浏览器窗口来进行定位,设置left,top,bottom,right

    2.相对定位position:relative;

    相对于元素本身定位,一般不设置left,top,bottom,right,主要是配合绝对定位实现元素的稳定排版。

    如果加入了left,top,bottom,right的话相对于元素开始的占位移动,由于相对定位没有脱离文档流,于是保留元素开始的占位。

    注:文档流:html布局就是文档流模型的,即块级元素元素独占一行<div><p>等等,行内元素不独占一行<a><span>等等。整个html文件排版下来就是文档流模型。

    3.绝对定位position:absolute;

    绝对定位相对于已经相对定位的最近的祖先元素,一般为了保证稳定直接给父子元素分别相对定位绝对定位,再加上left,top,bottom,right即可。

    <div style="position: relative;">
         <p style="position: absolute; left: 10px;top: 0;"></p>
       <a href="###"></a>
    </div>

    绝对定位是脱离文档流的,如上例中p元素不占位,如果有定位内容被覆盖通过z-index:xx设置优先级。

  • 相关阅读:
    机器学习数据
    偏差和方差
    numpy基础
    卷积神经网路
    深度学习基础
    Iris数据集
    SVM-SVR
    Java之日期处理
    MySQL笔记
    在Eclipse中运行的时候出现launching/Building
  • 原文地址:https://www.cnblogs.com/yuanyuan0809/p/5387278.html
Copyright © 2011-2022 走看看