position属性

来源：互联网发布：java设计模式工厂模式编辑：程序博客网时间：2024/05/20 13:06

//相对定位<!DOCTYPE html><html><head>    <meta charset="utf-8"></meta>    <title>相对定位</title>    <style type="text/css">    body{margin:0; padding: 0}    .box1{background-color: red;height: 80px;position: relative;top:50px;left: 30px}    .box2{height: 500px; background-color: yellow; }    .box3{height: 40px; background-color: blue;}    </style></head><body><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></body></html><!-- 相对定位：以自身初始位置为参照基准进行偏移，相对定位的元素仍处于标准文档流中(对兄弟元素造成影响)，随即拥有偏移属性和z-index属性 -->

//绝对定位<!DOCTYPE html><html><head>    <meta charset="utf-8"></meta>    <title>绝对定位</title>    <style type="text/css">    body{margin:0; padding: 0}    .box1{background-color: red;height: 80px;top:50px;left: 30px}    .box2{height: 200px; background-color: yellow;position: absolute;top: 20px;left: 15px }    .box{position:relative;height: 300px;background-color:#A907CB}    .box3{height: 40px; background-color: blue;}    </style></head><body><div class="box1">box1</div><div class="box">    <div class="box2">box2fvgd</div></div><div class="box3">box3</div></body></html><!-- 绝对定位：以包含块为基准的定位，完全脱离标准文档流，随即拥有偏移属性和z-index属性 1、未设置偏移量，无已定位祖先元素，都保持在元素初始位置，脱离标准文档流（对兄弟元素不再造成任何影响,尺寸随内容的宽度）2、未设置偏移量，有已设置定位的祖先元素，都保持在元素初始位置，脱离标准文档流。3、设置偏移量，有已定位祖先元素，以离他最近的祖先元素为参照基准。4、设置偏移量，没有已定位祖先元素，以<html>为偏移参照基准ps 当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节-->

0 0