html css定位篇

男娘i 2023-06-05 11:21 29阅读 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 条评论，29人围观）

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

相关阅读

相关 CSS+HTML实现元素定位

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

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

相关粘性定位（HTML、CSS）

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

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

相关相对定位（HTML、CSS）

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

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

相关绝对定位（HTML、CSS）

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

偏执的太偏执、/ 2023年10月03日 13:23/ 0 赞/ 22 阅读

相关固定定位（HTML、CSS）

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

约定不等于承诺〃/ 2023年10月03日 13:17/ 0 赞/ 23 阅读

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

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

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

相关 ⑥HTML+CSS 定位

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

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

相关 html css定位篇

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

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

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

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

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

相关【重识 HTML + CSS】定位

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

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