CSS绝对定位

最新推荐文章于 2023-12-02 11:02:39 发布

Jeff_YE893146555

最新推荐文章于 2023-12-02 11:02:39 发布

阅读量117

点赞数

分类专栏： html+css+js 文章标签： css定位

本文链接：https://blog.csdn.net/Jeff_YE893146555/article/details/84719651

版权

html+css+js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

2、如要脱离body包含块，自定义包含块，需要在包含块样式中追加，相对定位；

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title>绝对定位 实例在线演示 DIVCSS5</title> 

<style>

/*自定义包含块，需要包含块相对定位*/

#wrapper{ 

margin:0 auto;

position:relative;

width:610px;

height:559px;

border:1px red solid

} 

/* position:relative是绝对定位关键，父级设置 */ 

.box1{ 

 position:absolute; 

 width:147px; 

 height:140px; 

 left:198px; 

 top:14px;

 background:#CCC;

} 

.box2{

position:absolute; 

width:141px; 

height:186px; 

left:0px; 

background:red;

} 

.box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px;background:yellow;} 

/* 三个小盒子使用position:relative同时设置宽度 高度 left right top bottom实现布局与准确定位 */ 



</style>

</head> 

<body> 

<div id="wrapper"> 

<div class="box1"></div> 

<div class="box2"></div> 

<div class="box3"></div> 

</div> 

</body> 

</html>