zoukankan      html  css  js  c++  java
  • 定位

    1相对定位

    如果想为元素设置层模型中的相对定位,需要设置position:relative;,它还是会占用该元素在文档中初始的页面空间,

    通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置,然后相对于以前的位置移动,

    移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动

    一般用于

    1)微调元素

    2)做绝对定位的参考,子绝父相

    绝对定位

    如果想为元素设置层模型中的绝对定位,需要设置position:absolute;,并且要对相对于谁定位的元素机上position:relative,作用将元素从文档流中拖出来,

    将不占用原来元素的空间,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。

    如果不存在就逐级向上排查,直到相对于body元素,即相对于浏览器窗口。如果父元素和祖先元素都设置了position:relative,则它会根据就近原则 相对于父元素进行定位

    3 固定定位

    固定定位

    如果想为元素设置层模型中的固定定位,需要设置position:fixed;,直接以浏览器窗口作为参考进行定位,它是浮动在页面中,元素位置不会随浏览器窗口的滚动条滚动而变化,

    除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响。

    一般用于

    1)网页右下角的“返回到顶部”

    2)顶部导航条

    3)边栏的广告

  • 相关阅读:
    2019互联网安全城市巡回赛·西安站圆满收官
    跨域漏洞丨JSONP和CORS跨域资源共享
    浅谈URL跳转与Webview安全
    事务嵌套的问题
    小代码编写神器:LINQPad 使用入门
    重构指导之一
    视频的文件格式、压缩格式、码率、分辨率
    Asp.Net中自以为是的Encode
    Solution Explorer 和 Source Control Explorer 的 View History 异同
    借助 Resharper 和 StyleCop 让代码更整洁
  • 原文地址:https://www.cnblogs.com/zhanghaifeng123/p/11673032.html
Copyright © 2011-2022 走看看