CSS定位position

最新推荐文章于 2022-10-27 09:55:29 发布
最新推荐文章于 2022-10-27 09:55:29 发布
阅读量116 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47410267/article/details/105905885
版权

css定位 position

relative：相对定位

不使元素脱离文档流
保留原来的空间
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的

absolute：绝对定位

使元素完全脱离文档流
如果有定位祖先元素（绝对定位、相对定位、固定定位）相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移

fixed：固定定位

使元素完全脱离文档流
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

sticky: 粘性定位

保留原来的空间
只能设置 left top 属性 其他的无效
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

z-index定位层级

定义谁的优先级更高
定义的标签必须都是定位状态下

打死不穿格子衫
关注
专栏目录
深究CSS定位position的常用技法
09-27
在CSS中，定位是控制页面元素布局的关键技术之一。...在不断的学习和实践中，各位开发者应当能够更加熟练地运用CSS定位属性，以及理解定位带来的布局改变，从而更加高效地解决实际工作中遇到的各种布局挑战。
position(定位)
持剑的龙套的博客
09-20 691
  position 属性规定元素的定位类型，定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 1、position：relative 相对定位 特点： 1）不影响元素本身的特性； 2）不使元素脱离文档流（元素移动之后原始位置会被保留）； 3）如果没有定位...
css inset默认值,css中的inset/inset-inline/inset-block
weixin_30802367的博客
08-04 2925
css中当我们设置position:absolute的时候，一般都会去设置它的left/right/bottom/top，但是最近我看到chrome上，将left/right/bottom/top信息，变成了一个inset属性，同时还有inset-inline和inset-block属性，今天一起来看看这几个属性。insetinset这个属性是用来简化left/right/bottom/top这几...
绝对定位与inset
平平无奇小码农的博客
02-21 3475
实现一种这样的布局：屏幕中间有一块滚动区域，滚动滚动条时，里面的猫猫图片会随之滚动。 滚动条滚动一点时： 继续滚动滚动条，把猫猫图片展示在中间区域： 代码： <style> body { background-color: antiquewhite; } .contain { position: absolute; inset: 100px; overflow: auto; backgr
web前端的position定位及元素居中方式
tuantaun_的博客
07-27 2984
position定位方式 1.position:static 无定位（默认值） (1).元素出现在正常文档流（top、right、left、bottom等属性不使用） (2).当没有对一个元素指定定位时，使用static（默认），也就是按照文档的流式（flow）定位，将元素放到合适位置 (3).在不同分辨率下，采用流式布局可以很好地自适应，取得较好布局 2.position：inherit 继承父...
HTML5高级之position(定位)
热门推荐
Wendy
11-15 8万+
position 属性规定元素的定位类型，定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。      position一般分为三种，一种是相对定位relative，一种是绝对定位absolute，一种是固定定位fixed，接下来分别说明这三个属性的用法以及相对应的特性，并举例说明。
简明CSS定位属性position
09-25
CSS定位属性position是设计和布局网页时一个极为重要的部分，它使得开发者能够精确控制页面元素的位置。position属性有四个主要的值：static、fixed、relative和absolute，每个值有其特定的用途和行为模式。 1. ...
css定位position引发的层级关系问题详解
01-21
position定位里的absolute，relative和fixed absolue：绝对定位，用top,bottom,left...首先我们要知道，css属性其实是一个立体空间有x，y，z轴，但是只有我们使用了position定位时，z轴上的层级关系才体现出来，即z-in
全面剖析CSS Position定位
09-24
CSS Position定位是CSS布局中的重要概念，它决定了元素在页面中的具体位置。定位方式有多种，包括静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)以及继承定位(inherit)。每种定位方式...
css 中 position属性的深入学习
Maci_yera的博客
05-14 417
1. CSS 中position:absolute的定位到底是相当于body，还是父级元素的问题 结论如下： position:absolute是相对于他的包含块中第一个有position:absolute或者position:relative属性的父级元素，如果都没有，就是相对于body。 （这个细节困扰我蛮久）
css穿透绝对定位的层使下面的链接可点击
echo_Ae的博客
07-04 4520
在你定位的元素上加上 pointer-events: none; 提示 是你定位的元素哦（我定位在上面宽是百分百，高是百分百挡住了下面的点击  比较a链接等等）
使用定位position实现元素居中
里昂的博客
10-24 4337
在使用绝对定位时要想实现水平居中，可以按照下图的方法： left: 50%;：让盒子的左侧移动到父级元素的水平中心位置； margin-left: -100px;：让盒子向左移动自身宽度的一半。 垂直居中同上 ...
if for循环
weixin_47410267的博客
05-31 5090
一，If语句 if， if else if if <——>&&转换 if(条件判断）｛ 当条件成立时，执行里面的执行语句。 ｝ 当if成立时，才能执行｛｝里面的语句。当条件转换成布尔值，如果结果为true就执行，如果为false就不执行。 var num = 80; if( num > 85){ alert("优秀") }else if( num >= 7
VueRouter报错：Uncaught TypeError: Object(...) is not a function
weixin_47410267的博客
02-09 3334
Uncaught TypeError: Object(…) is not a function 记录一下VueRouter报错及解决方式 这里是使用VueRouter以后控制台报错了 报错信息：Uncaught TypeError: Object(…) is not a function 经过反复尝试发现是vue-router版本过高，所以报错 在package.json文件中查看版本号，vue-router版本是4.0.12 只需要将vue-router版本降低就不会报错了 在终端输入npm i vu
Element UI 自定义表格头部、Table-column Scoped Slot
weixin_47410267的博客
10-26 2252
Element UI 自定义表格头部、Table-column Scoped Slot
iView UI Select 选择器 下拉列表跟随滚动条移动
weixin_47410267的博客
10-27 1449
iView UI Select 选择器 下拉列表跟随滚动条移动
sticky粘性定位
weixin_47410267的博客
03-21 955
粘性定位sticky 如果不设置偏移量，sticky就不会生效 如果发生偏移，会保留原来位置，会 偏移量只能设置 left top 其它的没有效果 只有父容器在浏览器窗口内，sticky才会生效，偏移量是相对于浏览器视口 如果父容器和浏览器视口有一定的距离，而且这个距离大于left和top 则这个偏移量就会失效(贴在父容器上)，当滚动条移动到设置的left top范围内，这时会类似于fixed定位，不受滚动条的影响…说不下去了…说点人话吧 sticky有点像fixed，使用sticky的元素必须在父
利用边框制作一个三角形
weixin_47410267的博客
05-05 804
如何利用边框制作一个三角形？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
对象
weixin_47410267的博客
06-12 658
对象 例如： var mrDeng = { name : 'mrDeng', age : 40, sex : "male", health : 100, smoke : function () { console.log('I am smoking!'); this.health --; }, drink : function () { console.log('I am drink
css定位position
最新发布
07-28
CSS中的position属性用于控制元素的定位方式。根据引用\[1\]和引用\[2\]，position属性有五个值：static、relative、absolute、fixed和sticky。 - static：元素按照正常的文档流进行布局，不会受到position属性的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值