定位

作者: Citrus柑橘味气息 | 来源:发表于2018-11-25 18:01 被阅读0次

定位:
定位指的就是将指定的元素摆放到页面的任意位置通过定位可以任意的摆放元素
通过position属性来设置元素的定位
可选值:
static:默认值,元素没有开启定位
relative:开启元素的相对定位
absolute:开启元素的绝对定位
fixed:开启元素的固定定位(也是绝对定位的一种)
相对定位:
当元素的position属性设置为relative时,则开启了元素的相对定位
1.当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化
2.相对定位是相对于元素在文档流中原来的位置进行定位
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素的性质,块还是块,内联还是内联
当开启了元素的定位时,可以通过left right top bottom四个属性来设置元素的偏移量
left:元素相对于其定位位置的左侧偏移量
right:元素相对于其定位位置的右侧偏移量
top:元素相对于其定位位置的上边的偏移量
bottom:元素相对于其定位位置下边的偏移量
绝对定位:
当position属性值设置为absolute时,则开启了元素的绝对定位
1.开启绝对定位,会使元素脱离文档流
2.开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化
3.绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位,都会同时开启父元素的相对定位)
如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质:
内联元素变成块元素,
块元素的宽度和高度默认都被内容撑开
固定定位:
当元素的position属性设置fixed时,则开启了元素的固定定位
固定定位也是一种绝对定位,它的大部分特点都和绝对定位一样
不同的是:
固定定位永远都会相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动
IE6不支持固定定位

相关文章

  • 定位,定位,还是定位

    要想成为一个好的文字的输出者,首先要给自己一个合理的定位。定位可以首先想象自己想成为的角色:一个能够通过各种故事启...

  • 10-CSS定位流

    定位流 定位流分类相对定位绝对定位固定定位静态定位 相对定位 什么是相对定位?相对定位就是相对于自己以前在标准流中...

  • CSS中的几种定位

    CSS中常用的定位有 普通定位,相对定位 绝对定位、fixed定位 浮动 1、普通定位和相对定位 css中的元素有...

  • 2017-02-23 CSS 学习笔记

    定位流 定位流分类 相对定位 绝对定位 固定定位 静态定位 什么是相对定位相对定位就是相对于自己以前在标准中的位置...

  • #30天专注橙长计划#品牌定位30(6)营销推广1

    品牌定位的维度包括: 市场定位、价格定位、形象定位、地理定位、人群定位、渠道定位等; 经过前期大量的市场调研工作,...

  • D28:系统地图, 高德地图

    目录一. 定位功能 iPhone手机定位(基站定位, WiFi定位, GPS定位: 定位所需时间递增, 精确度递增...

  • 相对定位、绝对定位和固定定位

    1. 相对定位 定位有三种:相对定位,绝对定位、固定定位。 相对定位: position:relative lef...

  • 定位流

    定位流指的是:相对定位(relative)/绝对定位(absolute)/固定定位(fixed) 不包括静态定位(...

  • CSS补充2

    定位position 定位分为四种:相对定位 relative,绝对定位 absolute,固定定位 fixed,...

  • 定位

    1、static定位(普通流定位) -------------- 默认定位 2、float定位(浮动定位) 例:f...

网友评论

      本文标题:定位

      本文链接:https://www.haomeiwen.com/subject/udzpqqtx.html