CSS position定位属性
css中的position属性是用于设置元素位置的定位方式
它有以下几种取值：
static：默认定位方式，子容器在父容器中按照默认顺序进行摆放
absolute：绝对定位，元素不占据父容器空间，相当于文档body定位，根据父容器的position：relative进行定位，如果父容器没有该属性，就默认以body为父容器进行定位
relative：相对定位，占据父容器空间，但显示位置相当于自身位置进行偏移，可以在父容器上写该属性，帮助子元素定位
fixed：固定定位，元素相当于窗口进行定位（相当于窗口而不是文档定位，所以即使发生进度条滚动时，元素相当于窗口的位置仍然不变）
sticky：粘性定位，这是一个带过渡效果的定位方式，只有在滚动时才能看出其变化效果
当偏移量大于指定值时，以static方式显示
当偏移量小于指定值时，以fixed方式显示，但却像relative方式一样占据父容器空间
当元素到达父容器边缘时，位置相当于父容器不再变化
效果可看以下html代码
<body>
<div>
<div id="div1">div1</div>
<div id="div2">div2</div>
</div>
<div id="div3">div3</div>
</body>
默认定位static
<style>
#div1 {
width: 200px;
height: 100px;
background: red;
position: static;
} #div2 {
width: 200px;
height: 100px;
background: yellow;
} #div3 {
width: 200px;
height: 100px;
background: blue;
}
</style>
absolute定位
#div1 {
width: 200px;
height: 100px;
background: red;
position: absolute;
left: 400px;
top: 300px;
relative定位
#div1 {
width: 200px;
height: 100px;
background: red;
position: relative;
left: 400px;
top: 300px;
}
fixed定位
#div1 {
width: 200px;
height: 100px;
background: red;
position: fixed;
right: 10px;
bottom: 10px;
}
sticky定位
<body>
<div id="div4"></div>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
<div id="div5"></div>
</body> <style>
* {
margin: 0px;
padding: 0px;
} #div1 {
width: 400px;
height: 400px;
background: red;
} #div2 {
width: 200px;
height: 100px;
background: yellow;
position: sticky;
top: 40px;
} #div3 {
width: 300px;
height: 200px;
background: rebeccapurple;
} #div4 {
width: 400px;
height: 200px;
background: lightblue;
} #div5 {
width: 400px;
height: 2000px;
background: lightblue;
}
</style>
CSS position定位属性的更多相关文章
- css - Position定位属性与层级关系
今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- CSS position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
- 教你玩转CSS Position(定位)
CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...
- Css Position定位(简易版本)
准备前的知识: 定位只对块级起作用.如div,p等元素是块级元素,如果是内联元素则可以先变成块级元素,display:block即可. 开始讲解: 定位共四种:static,fixed,relativ ...
- 【CSS】position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
- [CSS]position定位
CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元 ...
- <转载>DIV+CSS position定位方法总结
如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任 ...
- CSS| position定位和float浮动
对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...
随机推荐
- Python Sklearn.metrics 简介及应用示例
Python Sklearn.metrics 简介及应用示例 利用Python进行各种机器学习算法的实现时,经常会用到sklearn(scikit-learn)这个模块/库. 无论利用机器学习算法进行 ...
- Wireshark安装失败或找不到网络接口问题
Wireshark安装失败或找不到网络接口问题 Wireshark捕获数据包,主要依赖Winpcap或Npcap组件.从Wireshark 3.0开始,Npcap代替了Winpcap组件,成为Wire ...
- 十三： 悲观锁&乐观锁：解决丢失更新问题
悲观锁:认为丢失更新一定会出现,可以在查询的时候加入for update 认为丢失更新一定会出现,查询时: select * from account for update;for update : ...
- 并行执行 Job【转】
有时,我们希望能同时运行多个 Pod,提高 Job 的执行效率.这个可以通过 parallelism 设置. 这里我们将并行的 Pod 数量设置为 2,实践一下: Job 一共启动了两个 Pod,而且 ...
- 编程题目 定义栈的数据类型，请在类型中实现一个能够得到栈最小元素的minx函数。
首先自己用 节点 实现了 栈 这种数据类型 为了实现题目了要求,我使用的两个栈. 一个栈 用来 push pop 用户的数据, 另外一个栈用来存放 最小元素(涉及元素比较) 代码如下: #!/usr/ ...
- $('#myModal').modal('show') //显示$('#myModal').modal('hide')隐藏
你这样试试,这是官方文档的写法 $('#myModal').modal('show') //显示$('#myModal').modal('hide')隐藏 //重复点击的隐藏显示有一个很更方便的写法$ ...
- 洛谷 P1929 迷之阶梯
题目传送门 解题思路: f[i]表示跳到第i层的最少移动次数,如果可以从下面一级跳上来,那么直接跳上来,如果跳不上来,那就往后退,退到不能退或能跳上第i层 AC代码: #include<iost ...
- Redis详解（五）——主从复制
Redis详解(五)--主从复制 面临问题 机器故障.我们部署到一台 Redis 服务器,当发生机器故障时,需要迁移到另外一台服务器并且要保证数据是同步的.而数据是最重要的,如果你不在乎,基本上也就不 ...
- 026、MySQL取字符串左边，取字符串右边，取字符串中间，取文本开始位置
#取文本左边 ); #田 ); #田攀 ); #田攀5 #取文本右边 ); # ); # ); #攀52 #取文本中间 '); #田攀 '); #攀5 #从字符串s中获取s1的开始位置 不忘初心,如果 ...
- canvas绘制表盘时钟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...