position属性：

来源：互联网发布：淘宝做工瑕疵运费编辑：程序博客网时间：2024/05/20 11:20

例如：position：absolute；top；left；right；bottom；加像素

relative：相对定位：相对自己而言

absolute：绝对定位：对于body而言

fixes：固定定位：对于屏幕而言

<!DOCTYPE html><html><head><title></title><style type="text/css">div {margin: 10px;background-color: red;width: 200px;height: 200px;}</style></head><body>  <div>1111</div>  <div>2222</div>  <div>3333<div style="width: 100px;height: 100px; background-color: blue">4444</div>  </div></body></html>

效果图：

相对定位：(相对于自己之前的位置而言的移动）

<div style="position: relative;left：30px；top:20px">1111</div>

效果图：

绝对定位：（对于body而言）

<div style="position: absolute;left: 300px;top:200px">2222</div>

固定定位：相对屏幕而言不会动

<div style="position: fixed;right: 0px">3333<div style="width: 100px;height: 100px; background-color: blue">4444</div>  </div>

（为了实现滚动，加了很多p标签）

滚动前：

滚动后：

今天对定位的理解这么多

阅读全文

0 0