• 解析position定位


    关于position定位(所有主流浏览器都支持 position 属性),大家会联想到relative和absolute,下面我就讲一下relative和absolute分别是相对于谁进行定位的?

      在CSS布局中,Position发挥着非常重要的作用,很多容器的定位是用Position来完成,有四个可选值,它们分别是:static、absolute、fixed、relative,这里向大家描述一下它的使用。

      absolute:生成绝对定位的元素,相对于最近一级的定位不是static的父元素来进行定位。

        使用position:absolute,能够很准确的将元素移动到你想要的位置,让我将nav移动到页面的右上角。我们可以这样写:

        nav{position:absolute;top:0;right:0;200px;}

      fixed:也是生成绝对定位的元素,通常相对于浏览器窗口或frame进行定位。需要注意的是IE6并不支持此属性。

      relative:生成相对定位的元素,相对于其在普通流中的位置进行定位。

        我们需要明确一个概念,相对定位是相对于元素默认的位置的定位。

      static:默认值。没有定位,元素出现在正常的流中。

    CSS中的定位:

      relative:相对定位,位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,元素仍然处于正常文档流当中,可以通过left、top、right和bottom的CSS规则来改变元素所处的位置。

      absolute:绝对定位,位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标,元素脱离正常文档流,可以通过left、top、right和bottom的CSS规则来改变元素所处的位置。

      fixed:固定定位,位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。

        position:fixed  相对于窗口的固定定位    

        所谓相对定位到底是什么意思呢,是基于哪里的相对呢?我们需要明确一个概念,相对定位是相对于元素默认的位置的定位。既然是相对的,我们就需要设置不同的值来声明定位在哪里,top、bottom、left、right四个数值配合,来明确元素的位置。

        fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。

      static:默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。

      !注意:很多网页都是居中的,这样,当对元素进行绝对定位的时候,在不同的分辨率下显示会有偏差,这时,我们可以通过类似下面的方法来处理:

      <div style="position: relative;">

      <div style="position: absolute; top: 10px; left: 10px;"></div>

      </div>

      这就是我对position的理解,希望能帮到学习的你。

  • 相关阅读:
    Vue.js 章6 v-model与表单
    Vue.js 简单购物车开发
    Vue.js实战 章五:内置指令
    Vue stage3
    Vue初接触 stage1
    前端代码的一些恶优化
    websocket介绍 以及 vue websocket使用案例
    回忆一下跨域
    如何使用Flexible这样的一库来完成H5页面的终端适配
    css 输入px单位的数值 直接转换为rem的插件
  • 原文地址:https://www.cnblogs.com/xkweb/p/5851034.html
Copyright © 2020-2023  润新知