CSSposition定位(relative、absolute、fixed、sticky)
这一周,我在逆战班学习了很多,具体介绍一下position相对定位和绝对定位,希望可以帮助到你。
**position定位 **
position 的五个属性:static(默认)、relative、absolute、fixed、sticky。
默认的是 :static相对定位:relative 绝对定位:absolute 固定定位:fixed粘性定位:sticky
** 定位偏移量 : left top right bottom , 不能单独使用,必须得配合定位模式。**
接下来我详细介绍一下每一个怎么用跟它的特点。
首先默认我创建三个盒子,分别给它加上设置宽高跟背景色,代码如下,在浏览器中如图下所示。
<body><div id="box1"></div><div id="box2"></div><div id="box3"></div>
</body>
<style>#box1{ width:100px; height:100px; background: red;}#box2{ width:100px; height:100px; background: blue;} #box3{ width:100px; height:100px; background: green;}</style>
第一个是默认的static,我就不多说了。
第二个是相对定位,用法是position: relative;首先我说下它的特点:
1.如果没有定位偏移量,对元素本身没有任何影响2.不使元素脱离文档流,空间是会被保留。3.不影响其他元素布局
现在在box2中加入 position: relative;可以看到什么都没有变化。
现在给他加上left:20px; bottom:-50px;可以清晰的看到蓝色盒子向下偏移了,但是box3不会发生变化。如下图
通过上面的例子,你应该知道了相对定位,接下来,看下绝对定位。
1.使元素完全脱离文档流2.使内联元素支持宽高 (让内联具备块特性)3.使块元素默认宽根据内容决定(让块具备内联的特性)4.如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)注:如果祖先元素中有多个元素具备定位模式,那么是已离自己最近的祖先元素进行偏移。
现在我给box2加上 position: absolute;为了看到效果我给box3加大了宽高,可以看到绿色方块一部分被蓝色覆盖了,我们可以知道box2脱离了文档流,那么此时box3就会跑到上面。即蓝色方块覆盖住了绿色方块的一部分。如下图
#box1{ width:100px; height:100px; background: red;}#box2{ width:100px; height:100px; background: blue; position: absolute;}#box3{ width:300px; height:300px; background: green;}
下面看第二个特点,使内联元素支持宽高 (让内联具备块特性)。
首先写一个内联,用span标签。我们知道内联元素不支持宽高,如下图一现在给内联元素加上position: absolute;可以看到它变化了。如下图二。
<span class="span1">我是图一</span><hr><span class="span2">我是图二</span>
.span1{ width:100px; height:100px; background:red; }.span2{ width:100px; height:100px; background:red; position: absolute; }
接下来看第三个特点它可以使块元素默认宽根据内容决定(让块具备内联的特性)
首先我们知道块元素的特点,当不写宽时候,会充满整个屏幕,如下图一,当写了position: absolute; 它会具有内联的特性,宽由内容决定,如下图二。
<div class="div1">我是图一</div><div class="div2">我是图二</div>
.div1{ height:100px; background:red; }.div2{ height:100px; background:red; position: absolute; }
接下来看第四个特点:如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移。首先我们设置一下初始样式。如下图
<body><div id="box1"><div id="box2"></div></div>
</body>
#box1{ width:300px; height:300px; border:1px black solid; } #box2{ width:100px; height:100px; background:red;}
现在给box2加 position: absolute;left: 0;top: 0;你觉的它会在哪呢?它现在相对于整个浏览器做的绝对定位,所以跑到了浏览器的最左上角。
我们首先要确定祖先元素,只要有定位模式,他就会变了。当你给box1设置了定位时候,它会怎么变呢?接下来我们给box1设置position: relative;给box2设置position: absolute;left:50px;top:30px;它就会相对于box1进行偏移了。如下图
现在我们给body也设置一个定位模式,此时box1,box2依然设置跟刚才一样。如下图所示,它依然不动,可以可以知道
如果祖先元素中有多个元素具备定位模式,那么是已离自己最近的祖先元素进行偏移。
body{width: 500px; height: 500px; position: relative; border:1px black solid;}#box1{ width:300px; height:300px; border:1px black solid; margin:100px;position: relative;}#box2{ width:100px; height:100px; background:red;position: absolute;left:50px;top:30px;}
学完了相对定位跟绝对定位,来看下固定定位语法是position:fixed;首先看下固定定位特点:
1.使元素完全脱离文档流2.使内联元素支持宽高 (让内联具备块特性)3.使块元素默认宽根据内容决定(让块具备内联的特性)4.相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响不会受到祖先元素的影响。
这个说白了就跟页面的小广告似的,固定到那不动。
<body><div id="box1"><div id="box2"></div><p>测试文字测试文字</p><p>测试文字测试文字</p><p>测试文字测试文字</p><p>测试文字测试文字</p></div>
</body>
<style>body{ position: relative;height: 1111px; border:1px black solid;}#box1{ width:200px; height:200px; border:1px black solid; margin:200px;position: relative;}#box2{ width:100px; height:100px; background:red; position: fixed; left:0px; top:40px;}</style>
最后就是 sticky(黏性定位),语法是position: sticky;
在没有到达指定位置的时候,是没有定位效果的,到达了指定位置,就变成了固定模式。
例子呢,我也写了一个,读者可以看一下,自行操作一下吧。
<body><p>pppppppp</p><p>pppppppp</p><p>pppppppp</p><p>pppppppp</p><p>pppppppp</p><div id="box">aaaaaaaaaaaaa</div><p>pppppppp</p><p>pppppppp</p><p>pppppppp</p><p>pppppppp</p><p>pppppppp</p><p>pppppppp</p>
</body>
<style>p{ margin:100px 0;}#box{ background:red; position: sticky; top:100px;}
好了我在帮你总结一下定位吧!
position特性:css position属性用于指定一个元素在文档中的定位方式。
top、right、bottom、left 属性则决定了该元素的最终位置。
position取值:static (默认)relative (相对定位)如果没有定位偏移量,对元素本身没有任何影响不使元素脱离文档流,空间是会被保留的不影响其他元素布局left、top、right、 bottom是相对于当前元素自身进行偏移的absolute (绝对定位)使元素完全脱离文档流使内联元素支持宽高(让内联具备块特性)使块元素默认宽根据内容决定(让块具备内联的特性)如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)注:如果祖先元素中有多个元素具备定位模式,那么是已离自己最近的祖先元素进行偏移。fixed(固定定位)使元素完全脱离文档流使内联元素支持宽高(让内联具备块特性)使块元素默认宽根据内容决定(让块具备内联的特性)相对于整个浏览器窗进行偏移,不受浏览器滚动条的影响不会受到祖先的影响sticky(黏性定位)在指定的位置,进行黏性操作。
希望文章可以帮助你。
CSSposition定位(relative、absolute、fixed、sticky)相关推荐
- html本文框百分比定位,HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点...
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...
- HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...
- html绝对定位向下,HTML中三种定位relative,absolute,fixed使用后出现的一些问题
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...
- CSS定位总结:position=static/relative/absolute/fixed时的区别、top/bottom/left/right与margin外边距的运用
准备布局: <!DOCTYPE html> <html> <head> <style> *{ margin:0; padding:0; } .base- ...
- CSS中position属性(relative,absolute,fixed)和display中的inline-block
前言 平时很少写CSS,用的多也就是Bootstrap来堆样式,写起来快一点,但是有时候需要自己写,很久没写容易忘记,这里记录下这两个常用属性position和display 这里贴一条CSDN设置图 ...
- CSS的定位 position属性的 absolute relative static fixed的区别及用法
CSS中position一般是跟盒子结合做出效果的,浮动可以实现盒子在横向上的排列,但是如何实现在盒子上重叠另一个盒子的效果呢?就需要CSS的position来实现 position属性有四个,分别有 ...
- CSS+DIV定位分析(relative,absolute,static,fixed)
各个属性值的定义: 1.static:默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative:生成相对定位 ...
- css中position属性(absolute/relative/static/fixed)
css中position属性(absolute/relative/static/fixed): position:static 无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top ...
- HTML之position:absolute relative static fixed的区别和理解
HTML之position:absolute relative static fixed的区别 在理解position:absolute relative static fixed的区别时,我们先需要 ...
- web前端position定位层:absolute+relative应用
web前端html定位层的特点: 完全脱离默认文档流,独立于立体层面的Z轴之上.和float浮动一样都脱离了默认文档流.但float元素与默认文档流之间会相互产生影响,而定位层元素则完全独立互不干扰. ...
最新文章
- apache开启虚拟主机 并进行配置
- wxWidgets:显示 wxDebugReport 和相关类的最小示例
- lock_sh 示例_带有示例的Python date __str __()方法
- 2012/8/3 Extjs使用TabPanel时需要注意的问题
- CVPR 2019 论文大盘点-人脸技术篇
- dll = MinGW gcc 生成动态链接库 dll 的一些问题汇总
- windows server2003/R2 安装IIS6(asp.net)
- java中输出日历_Java:输入年份和月份打印出相应的日历表
- Jdk8下载安装配置教程
- BIP学习第一课,创建一个应用和实体并设计页面(图文)
- 微信扫码ios:scanQRCode:the permission value is offline verifying
- AdSense后台添加美国税务信息W-8BEN纳税表秒过的详细操作图文教程
- [Erlang 0075] Bad value on output port 'tcp_inet'
- 讯飞离线语音合成(离线资源包)
- Kotlin by lazy解析及在findviewById场景中的使用
- 做数据分析的36款常用工具!!!初学者必备,纯干货!!
- jsp使用URLRewrite实现url地址伪静态化
- 开发必装最实用工具软件与网站
- PCA,LDA的C++实现(内附代码~)
- 2021年技术体系架构
热门文章
- PyCharm2017破解教程
- 让你心动的20句励志文案
- codeforces 1153D Serval and Rooted Tree
- discuz上传图片html,Discuz编辑器H5上传
- total-vm anon-rss file-rss shmem-rss含义
- 网络显示连接正常,就是网页打不开(也适用于ie可以打开,google打不开情况)
- ai的智能发展不会超越人类_人工智能:超越炒作
- 高考加油别学计算机图片,高考加油图片励志壁纸图片欣赏
- 测试之全流程质量保证
- mds聚类matlab,机器学习C9笔记:MDS聚类可视化