欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css:position定位属性及实例应用总结

程序员文章站 2022-03-15 08:55:39
...
position定位属性

css中position是一个非常的重要的属性,它有absolute(绝对定位)、relative(相对定位)、static(静态定位,默认值)、fixed(固定定位)四种。通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性。目前几乎所有主流的浏览器都支持position属性,下面的文章我们就来说说css中position定位属性和其应用。

可以先学习相关的免费课程

1. 学习《HTML+CSS基础入门教程》中的 CSS基础教程之定位 章节

css:position定位属性及实例应用总结

2. 观看《弹指间学会CSS视频教程》CSS定位 视频教程

css:position定位属性及实例应用总结

position定位相关应用

1. 深入了解css中的position属性

绝对定位会彻底从文档流中拿出来,元素之前占据的空间也被回收啦。绝对定位元素的定位依靠其定位上下文。
需要注意的是:这里写过绝对定位可以将行内元素变为块级元素的表现形式。但是确定就是一旦将行内元素进行绝对定位后,该元素的位置不好掌握,(原因:如果该元素没有设置内外边距,且前后左右也没有绝对定位元素,那么该元素会暂时停留在自己原来的位置,但是如果该元素设置了外边距,那么该元素会暂时停留在距原来位置一个外边距的距离。如果他前后左右都是设置了绝对定位的元素,那么该元素会寻找最上面一个不是绝对定位的元素下面。<有没有后悔听原因啦>)所以,一点那设置了绝对定位需要马上为该元素进行top、left定位。

2. 解析css的position里的relative和absolute的区别

position有以下属性:static、inherit、fixed、absolute、relative
前三个好理解好区分:
static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
nherit:从父元素继承 position 属性的值。
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。(即滚动浏览器的时候,元素永远固定显示在窗口可视区的某个位置)。

3. CSS定位position使用介绍

absolute和fixed特点:

a、块级元素的宽度在未定义时不再为100%,而是根据内容自动调整

b、在不定义z-index的情况下,absoulte元素会覆盖在其他元素上。

c、它会脱离正常的文档流,不再占据空间,类似于浮动后的效果

absolute是相对上一个不为static的父元素进行绝对定位。如果不指定父元素的position,absolute将相对于整个html文档进行绝对定位。

4.使用CSS中position属性的定位方法说明

css:position定位属性及实例应用总结

一个 static 定位的元素会忽略所有 top,right,bottom,left 以及 z-index 属性所声明的值。为了让你的元素能使用这五个属性,你需要先为它的 position 属性应用这三个值的其中之一: absolute,relative,fixed,position 值为 inherit 的元素和其他所有属性的继承值一样,元素会继承父元素的 position 值。

5. css中position定位的四种方法总结

脱离标准文档流

  特点:(1)如果这个元素没有父元素,那么将来top、left、right、bottom是相对于浏览器窗口来定位的

     (2)如果绝对定位的元素有父元素,但父元素没有相对定位,那么这个时候top、left、right、bottom还是相对于浏览窗口来定位的

     (3)如果绝对定位的元素有父元素,而且父元素有定位(非static),那么这个绝对定位的元素偏移是以自己的父元素为基础

     (4)绝对定位之后的元素在页面上不会占据位置

6. CSS的position定位和float浮动

a.假如有一个默认100%宽度的p,一旦加上absolute绝对定位,该元素立马inline-block化,默认宽度就会自适应元素内部宽度,会导致页面的宽高塌陷。

b.由于absolute绝对定位的灵活性,对于普通的页面布局,有时出于省事的原因很容易造成absolute/relative/top/left/z-index的滥用,这样会使后期的扩展和维护造成麻烦

相关问答

1. 不用position:absolute怎么实现类似的功能

2. 移动端position:fixed;的兼容问题

3. css部分position fixed web网页问题 纯css做的下拉

4. div设置了position: fixed属性后如何可以做到随浏览器左右移动?

【相关推荐】

1. 免费教程:《CSS 0基础入门教程》

2. 免费视频教程:《php.cn独孤九贱(2)-css视频教程》

以上就是css:position定位属性及实例应用总结的详细内容,更多请关注其它相关文章!