html定位（html定位的几种方式）
本文目录
html定位的几种方式
① CSS有三种定位方式：相对定位，绝对定位，固定定位；
② 相对定位-》position：relative；
③ 绝对定位-》position：absolute；
④ 固定定位-》position：fixed；
在html中定位属性怎么用
position就是css中的定位属性，值有好几个，常用的就是relative和absolute。
relative就是相对定位，所谓的相对定位就是相对标签本身之前的位置，可以理解为元神出窍。相对定位的标签不管top等值是多少都会在原地留下原来位置。
absolute绝对定位，直接用绝对定位的话，锁定的位置是相对于浏览器来说的，如果父元素或者父元素的上一级元素是相对定位的话，那么绝对定位会根据设置了相对定位的元素来调整下位置。
设置了定位以后可以通过top,left,right,bottom来调整位置。用top就可以不用bottom，用left就可以不用right，反之亦然。
位置的值可以是像素，也可以是百分比等。比如top: 50%这样。
在HTML中，三种定位的区别和含义分别是什么
一、相对定位 relative
1.参照物为自身；
2.相对定位只改变显示的位置，而不会改变占用的空间位置；
3.关于距离的正负值
二、绝对定位 absolute
1.参照物为具有定位属性的父元素。
PS:如果距离当前最近的父元素不具有定位属性，则会一层一层向外找，直到找到具有定位属性（这里仅要求三种定位属性任一都可）的父元素而进行定位，如果找到最后未能找到具有定位属性的父元素，de则最终会依照body进行定位。
2.绝对定位不仅会改变显示的位置，而且会改变占用的空间位置。就好比是元素处于一种悬空漂浮的状态，没有“肉体”！
3.关于距离的正负值，和上面的相对定位的性质一样。
三、固定定位 fixed
固定定位是将某个元素固定在浏览器的某个确定的位置，不随滚动条的移动而变化；
固定定位的位置是 相对当前浏览器窗口 的；
如何在HTMl中实现元素的精确定位
1、先进行全局定义。比如
*{margin:0; padding:0;}
body,div,input{margin:0; padding:0;}（还可以加别的元素进去），各浏览器的不同大部分也就是对于边距的解释不同。
2、实现效果的方法有很多，尽量用科学合理的方法。比如你的这个input，你是用input去贴合一整张大背景图片。但其实可以把你的这个图片中输入框的部分单独做成图片，然后在input的样式表里定义背景。这样就算input跑偏了，也不会出现你图中这样与背景图分离的情况。这种方法虽然繁琐一点，但在方法上却是科学合理的。图片体积也小了，浏览器解释起来也快一些。
3、代码科学规范。不同的写法可能会有不同的效果，也会造成元素移位。比如明明设置了margin-top:10px却不起作用，这就跟上下文的写法相关。这个具体要看情况，不好作出说明。自己摸索吧。
一旦将HTML元素的定位属性设为绝对定位,他的宽度将发生怎样的变化
定位主要对元素的位置有影响
尺寸影响的话分为两个情况：
如果元素本身是块级元素，那么绝对定位不影响尺寸；
如果元素本身是内联元素，那么绝对定位就会让该元素支持宽度和高度。
更多文章：
2026年10月11日 06:30
2026年10月11日 06:20
2026年10月11日 05:40
another time（another time和other time的区别）
2026年10月11日 05:00
2026年10月11日 04:50
2026年10月11日 03:00
2026年10月11日 02:40
2026年10月11日 02:20
2026年10月11日 01:10
2026年10月11日 00:40
