CSS Position(定位)
Position(定位)
position可以取五个值
参数 | 描述 |
---|---|
absolute | 绝对定位;脱离⽂档流的布局,遗留下来的空间由后⾯的元素填充。定位的起始位置为最近的⽗元素(postion不为static),否则为Body⽂档本身。 |
relative | 相对定位;不脱离⽂档流的布局,只改变⾃身的位置,在⽂档流原先的位置遗留空⽩区域。定位的起始位置为此元素原先在⽂档流的位置。 |
fixed | 固定定位;类似于absolute,但不随着滚动条的移动⽽改变位置。 |
static | 默认值;默认布局。 忽略 top, bottom, left, right和z-index |
inherit | 从父元素继承该属性的值 |
以上的absolute
和fixed
可以使得元素脱离文档流。
position属性只是定义元素的定位方式,要想此元素能按照希望的位置显示,就需要使⽤下⾯的属性(position:static不⽀持这些):
- left : 表示向元素的左边插⼊多少像素,使元素向右移动多少像素。
-
right :表示向元素的右边插⼊多少像素,使元素向左移动多少像
素。 - top :表示向元素的上⽅插⼊多少像素,使元素向下移动多少像素。
-
bottom :表示向元素的下⽅插⼊多少像素,使元素向上移动多少像
素。上⾯属性的值可以为负,单位:px 。
绝对定位(absolute)
脱离⽂档流的布局,遗留下来的空间由后⾯的元素填充。定位的起始位置为最近的⽗元素(postion不为static),否则为Body⽂档
本身。
相对定位(relative)
不脱离⽂档流的布局,只改变⾃身的位置,在⽂档流原先的位置遗留空⽩区域。定位的起始位置为此元素原先在⽂档流的位置。
固定定位(fix)
类似于absolute,但不随着滚动条的移动⽽改变位置。
默认定位(static)
表示此元素为默认定位⽅式。
继承(inherit)
从父元素继承定位⽅式。
1.父容器的position
属性为relative
由上图可知,div继承了父类的position属性(relative);这时候div-a没有脱离文档流,只是相对于原来的位置向右边偏移了,留下一个空位。参考绝对定位的图形。
注意:此时的父容器是没有设置宽高的,(见图),我们可以看见父容器宽度为100%,高度自适应。
下面我们把父容器的定位改成absolute
2.父容器的position
属性为absolute
可以看出,div-a脱离了文档流,相对于父容器向右偏移了350px,后面的div-b占据了他的位置.
注意:此时我们可以发现,父容器宽和高都是自适应的。
然后我们在对两种情况进行研究。
- 父容器postion属性为
static
父容器宽度为100%,高度自适应。
- 父容器的position属性为
fixed
父容器宽高均自适应
从这里面。我们不仅可以看出inherit
的特性。而且我们还发现了以下规则:
重点
在父容器没有设置宽高的时候,
- 当父容器定位为
relative
和static
时,及没有脱离文档流时,宽度为100% - 当父容器定位为
absolute
和fixed
时,及脱离文档流时,宽高为自适应
前端学习
个人学习专栏,记录自己的前端学习
推荐阅读
Vue-cli中使用scss 的全局变量和 @mixin
安装 scss {代码...} 注意:sass-loader需要指定@10的版本,因为后续的版本在vue-cli脚手架中会出现一些问题基础使用 {代码...} 大部分场景下,使用scss可以实现上面的样式嵌套层级关系,相信大家都用过。下面要...
邢走在云端阅读 5.6k
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库
XboxYan赞 34阅读 2.3k评论 2
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...
XboxYan赞 30阅读 2.3k评论 2
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...
XboxYan赞 29阅读 3.5k评论 2
现代 CSS 之高阶图片渐隐消失术
在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: {代码...} {代码...} 但是,CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。想想看,...
chokcoco赞 25阅读 2.1k
除了 filter 还有什么置灰网站的方式?
大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。像是这样,我...
chokcoco赞 19阅读 1.6k评论 1
万能的CSS 渐变!单标签绘制一个足球场
一眼望去,这里的形状只有圆形和矩形,在不借助其他标签的情况下(包括伪元素),其实很容易联想到渐变,一起看看如何绘制的吧,有非常多的渐变小技巧~
XboxYan赞 18阅读 1.9k评论 8
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。