美文网首页【HTML+CSS】
【CSS定位position】

【CSS定位position】

作者: 魔_术师 | 来源:发表于2017-06-01 00:14 被阅读1次
CSS定位position

定位:position

概念:把一元素放置到需要放的网页位置;

属性值:static、relative、absolute、fixed、inherit;

位置声明:top、bottom、left、right;

absolute、fixed会使元素脱离文档流;

特点:所有元素都可以进行定位处理,定位后具有块的属性。

相对定位:relative

使元素偏移某个距离,所占空间仍然保留;

实际开发:元素不会脱离文档流,但是可以设置top、left等值进行操作,而且设置也是生效的。

1、如果元素的前面没有其他元素时,参照父级(最近)的内容区的左上角为原始点结合top、left、right、bottom属性进行定位;

2、如果元素的前面有其他元素,则针对上一个元素的位置进行定位。

绝对定位:absolute

设置绝对定位的元素,会脱离文档流;(具有层叠关系)

激活元素的absolute,必须指定left,right,top,bottom 属性中的至少一个;

绝对定位的元素相互层叠时,不具有 margin效果,但仍有 padding 和 border效果 。

绝对定位与相对定位的关系

(相对定位是相对于元素在文档流中初始位置的;而绝对定位是相对于最近的已经定位的祖先元素。)

1、如果父级(无限)没有设定position属性,那么当前的absolute则结合top,right,left,bottom属性以浏览器左上角为原始点进行定位;

2、如果父级(无限)设定position属性,且属性值为relative、absolute、fixed,那么当前的absolute则结合top,right,left,bottom属性以父级(最近)的左上角为原始点进行定位。

相对浏览器定位:fixed

相对于浏览器窗口的指定坐标定位;

元素的位置可通过left、right、top、bottom属性来规定;

IE6.0及以下版本的浏览器不支持position: fixed;

相关文章

  • css学习笔记:定位position

    css position定位 position选值类型: static:默认状态,不开启定位 relative:相...

  • css入坑之二

    css的元素定位->position属性 1.position:absolute 绝对定位。绝对定位是子元素相对于...

  • css粘性定位position: sticky

    css粘性定位position:sticky问题采坑position: sticky 详解(防坑指南)CSS中po...

  • HTML&&CSS初学问题汇总

    CSS Position定位理解:https://www.runoob.com/css/css-positioni...

  • 2019-01-04

    CSS布局1 说起布局就需要谈谈定位 谈及定位,我就得说说position属性 position static :...

  • CSS定位与浮动2016/6/12

    CSS 定位 (Positioning) CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 position...

  • CSS - 定位

    CSS 中的层级概念 CSS中分为3层 最上层:定位元素层(position:relative、position:...

  • 二十,CSS定位概述与相对定位

    CSS定位:position:relative(相对)/absolute(绝对)/ static(无定位)/ fi...

  • 前端

    一、定位 CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这...

  • [note] CSS 定位position|z-index

    内容概述 一. CSS属性 - position CSS属性 - positionstatic:静态定位relat...

网友评论

    本文标题:【CSS定位position】

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