html css定位篇

男娘i 2023-06-05 11:21 16阅读 0赞

position

absolute相对于父元素移动，不在父元素范围内时，可能和其他元素重叠

relative相对于初始位置来进行移动

fixed相对于浏览器进行定位，无论滑轮如何滚动，始终出现在浏览器的同一个位置

sticky粘性定位，该定位基于用户滚动的位置。页面滚动超出目标区域之前，表现和 position:relative;一样 ，页面滚动超出目标区域时，表现和position:fixed;一样

position: absolute;  
 top: 50%;  
 left:50%;  
 transform: translate(-50%,-50%);  
 -ms-transform: translate(-50%,-50%);

当使用：

position: absolute;

* top: 50%;  
 left:50%;*

元素左上角处于中心位置

translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，

元素中心处于中心位置

下面的有图片来清晰解释

![img2018-cnblogs-com_blog_1447454_201809_1447454-20180921154516619-1978132908.png][]

这是只有

position: absolute;

* top: 50%;  
 left:50%;*

*![img2018-cnblogs-com_blog_1447454_201809_1447454-20180921154550095-1247037459.png][]*

这是加了

translate(-50%,-50%)

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[img2018-cnblogs-com_blog_1447454_201809_1447454-20180921154516619-1978132908.png]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/51/img2018-cnblogs-com_blog_1447454_201809_1447454-20180921154516619-1978132908.png
[img2018-cnblogs-com_blog_1447454_201809_1447454-20180921154550095-1247037459.png]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/51/img2018-cnblogs-com_blog_1447454_201809_1447454-20180921154550095-1247037459.png

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS+HTML实现元素定位

文章目录相对定位 position: relative; 总结绝对定位 position: absolute; 总结固定定

r囧r小猫/ 2023年10月12日 18:08/ 0 赞/ 56 阅读

相关 HTML&CSS Day06 CSS定位布局

文章目录 1.定位布局 \- 1.1.静态定位（ Static positioning） \- 1.2.什么是相对定位?（ Relativ

﹏ヽ暗。殇╰゛Y/ 2023年10月12日 13:44/ 0 赞/ 31 阅读

相关粘性定位（HTML、CSS）

粘性定位（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <meta

一时失言乱红尘/ 2023年10月03日 13:35/ 0 赞/ 12 阅读

相关相对定位（HTML、CSS）

相对定位（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <meta

青旅半醒/ 2023年10月03日 13:34/ 0 赞/ 12 阅读

相关 HTML——CSS——定位（笔记）

1.为什么使用定位定位可以让盒子自由的在另外一个盒子的内部移动位置或者固定在屏幕中的某个位置，并且可以压住其他的盒子。 2定位使用方式定位=定位模式+边偏移

阳光穿透心脏的1/2处/ 2023年10月02日 11:22/ 0 赞/ 5 阅读

相关 ⑥HTML+CSS 定位

定位定位相对定位 ※ 绝对定位 ※ 固定定位 ※ 粘滞定位 ※ （导航条）绝对定位元素的布局元素的层级 z-index

你的名字/ 2023年07月20日 13:55/ 0 赞/ 17 阅读

相关 html css定位篇

position absolute相对于父元素移动，不在父元素范围内时，可能和其他元素重叠 relative相对于初始位置来进行移动 fixed相对于浏览器进行定位，无论

男娘i/ 2023年06月05日 11:21/ 0 赞/ 17 阅读

相关 html 去掉定位,css如何取消定位position？

在网页制作的过程中，经常会使用position来定位元素实现布局，那么，若想取消定位，应该怎么操作呢？下面本篇文章举例讲解CSS如何取消定位position。 ![d3d2a

旧城等待，/ 2022年10月06日 11:43/ 0 赞/ 370 阅读

相关 html css x y相对定位坐标,HTML与CSS之相对定位、绝对定位

相对定位指元素在其正常的位置偏移某些像素即相对于元素本身的原有位置html 我是C1 我是C2 css

╰+攻爆jí腚メ/ 2022年10月06日 03:56/ 0 赞/ 240 阅读

相关【重识 HTML + CSS】定位

定位标准流 (Normal Flow) CSS 属性 - position relative - 相对定位 static - 静态

待我称王封你为后i/ 2022年10月05日 03:59/ 0 赞/ 230 阅读