关于定位

2021/11/14 23:45:12

编程Tag： 元素定位固定 position 相对关于 100px

本文主要是介绍关于定位，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        body{height: 10000px;}
        div{width: 100px;height: 100px;}
        #guDing{background: lightblue;
            position: fixed;
            left: 500px;
            top: 200px;}
        #xiangDui{background: lightcoral;
            position: relative;
            left: 100px;
            top: 100px;}
        #jueDui{background: lightgreen;
            position: absolute;
            left: 100px;
            top: 100px;}
    </style>
</head>
<body>
定位三种：
固定定位:相对于浏览器定位
相对定位:不会脱离原本的文档流。相对于原本的位置定位（依然会占据原来的空间）
绝对定位:相对于离他最近的已定位父级定位
<div id="guDing"></div>
<div id="xiangDui"></div>
<div id="jueDui"></div>
</body>
</html>

1、绝对定位

绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不会占据空间。

绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先元素作为参考值，则相对于整个网页。

position：absolute；

2、相对定位

position：relative；

相对定位与绝对定位的区别在于它的参照点不是左上角的原点，而是该元素本身原先的起点位置。并且即使该元素偏移到了新的位置，也仍然从原始的起点处占据空间。

3、固定定位

position：fixed；

固定定位永远都会相对于浏览器窗口进行定位，固定定位会固定在浏览器的某个位置，不会随滚动条滚动。最常用的就是电脑里面是不是弹出的小广告，如果你不差掉它，当时滑动鼠标查看网页时，小广告一直会在那里，还有常用的就是网站或者APP的导航栏和底部的选择栏

这篇关于关于定位的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

关于定位

1、绝对定位

2、相对定位

3、固定定位

相关编程文章