盒子模型练习——运用position: relative、absolute、fixed来完成练习（图）

最新推荐文章于 2024-03-09 16:15:33 发布
最新推荐文章于 2024-03-09 16:15:33 发布
阅读量871 收藏 1
点赞数
分类专栏： CSS html+css入门学习过程 # 盒子模型练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45389633/article/details/103837740
版权

👉👉👉知识点总结任意门：

①position(五种属性，以及每个属性的特点)
②CSS定位—— position绝对定位、相对定位、固定定位

在这里插入图片描述
首先明确知道，position属性配合[top+left]（向右下移动）、[top+right]（向左下移动）、[bottom+left]（向右上移动）、[bottom+right]（向左上移动）使用。


一、利用相对定位position: relative;来完成效果

这个方法跟margin类似，不过margin是通过调整外边距，相对于父元素进行位移；而position: relative;则是调整相对于原来的位置的距离。
①首先，必须给每个box设置宽高（因为没有padding来填充，无法撑开宽高给父元素），并且设置好边的属性。
在这里插入图片描述
②接下来就使用positio: relative;来使每个子元素相对原位置进行位移
（因为这里是嵌套盒子，所以在不设定位置属性的情况下，如上图所示，可以理解为还是相对于父元素进行的位移，因为上一篇已经清楚了每个盒子间的边距，所以直接写就行了，唯一的差别是，margin: Xpx;在这里为position: relative; top/bottom: Xpx; left/right:Xpx;，且偏移前的位置保留不动。注意position要配合方向使用，因为它本身并不指定任何方向）
在这里插入图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>盒子练习——相对定位</title>
<style type="text/css">
body{
    padding: 0px;
    margin: 0px;
}
/*500×500*/
.box1{
    border: 5px dotted #000000;
    width: 490px;
    height: 490px;
}
/*440×440*/
.box2{
    border: 5px solid #0000ff;
    width: 430px;
    height: 430px;
    position: relative;
    top: 25px;
    left: 25px;
}
/*400×400*/
.box3{
    background-color: #ffa0df;
    width: 400px;
    height: 400px;
    position: relative;
    top: 15px;
    left: 15px;
}
/*300×300*/
.box4{
    border: 3px dotted #ffffff;
    width: 294px;
    height: 294px;
    position: relative;
    top: 50px;
    left: 50px;
}
/*280×280*/
.box5{
    border: 3px dotted #ffffff;
    width: 274px;
    height: 274px;
    position: relative;
    top: 7px;
    left: 7px;
}
/*150×150*/
.box6{
    border: 5px solid #ffff00;
    background-color: #adff2f;
    width: 140px;
    height: 140px;
    position: relative;
    top: 62px;
    left: 62px;
}
</style>
</head>

<body>
<div class="box1">
	<div class="box2">
		<div class="box3">
			<div class="box4">
				<div class="box5">
					<div class="box6"></div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>


二、利用绝对定位position: absolute;来完成效果

position的相对、绝对、固定都是定位属性值。所以position: absolute;参照定位的父元素，可以是position: absolute;可以是position: relative;也可以是position: fixed;
在这里插入图片描述

①如果想设定position: absolute;就要知道，它是相对于含定位属性的父元素来进行绝对定位的，如果父元素没有定位属性，那就再往外一个父元素，直到找到含定位属性的父包含块，如果都没有，那就以body为参考定位。
在这里插入图片描述
②如果需要相对父元素进行绝对定位，只需给父元素加上position就行了，可以不赋值。
在这里插入图片描述
③所以不要忘了这里在最外层的父元素——box1里面设置position，否则box2就相对body定位了。
在这里插入图片描述

PS：开发时，只要子元素出现position: absolute;父元素就必须设position: relative;不然走位。我这里每层都有定位属性，所以只在最外层设 position: relative; 而已。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>盒子练习——绝对定位</title>
<style type="text/css">
body{
    padding: 0px;
    margin: 0px;
}
/*500×500*/
.box1{
    border: 5px dotted #000000;
    width: 490px;
    height: 490px;
    /*在开发中，如果要使用绝对定位，且不希望参考body，那么它参照的定位元素必须是position: relative*/
    position: relative;	
}
/*440×440*/
.box2{
    border: 5px solid #0000ff;
    width: 430px;
    height: 430px;
    position: absolute;
    /*开发时，子元素出现 position: absolute; 父元素就需要设 position: relative; 不然走位，我这里每层都有定位属性，所以只在最外层设 position: relative; 而已*/
    top: 25px;
    left: 25px;
}
/*400×400*/
.box3{
    background-color: #ffa0df;
    width: 400px;
    height: 400px;
    position: absolute;
    /*开发时，子元素出现 position: absolute; 父元素就需要设 position: relative; 不然走位，我这里每层都有定位属性，所以只在最外层设 position: relative; 而已*/
    top: 15px;
    left: 15px;
}
/*300×300*/
.box4{
    border: 3px dotted #ffffff;
    width: 294px;
    height: 294px;
    position: absolute;
    /*开发时，子元素出现 position: absolute; 父元素就需要设 position: relative; 不然走位，我这里每层都有定位属性，所以只在最外层设 position: relative; 而已*/
    top: 50px;
    left: 50px;
}
/*280×280*/
.box5{
    border: 3px dotted #ffffff;
    width: 274px;
    height: 274px;
    position: absolute;
    /*开发时，子元素出现 position: absolute; 父元素就需要设 position: relative; 不然走位，我这里每层都有定位属性，所以只在最外层设 position: relative; 而已*/
    top: 7px;
    left: 7px;
}
/*150×150*/
.box6{
    border: 5px solid #ffff00;
    background-color: #adff2f;
    width: 140px;
    height: 140px;
    position: absolute;
    top: 62px;
    left: 62px;
}
</style>
</head>

<body>
<div class="box1">
	<div class="box2">
		<div class="box3">
			<div class="box4">
				<div class="box5">
					<div class="box6"></div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>


三、使用牛皮癣大法——固定定位position: fixed;来完成效果

①什么是牛皮癣？就是那些严重破坏城市形象美观的广告，贴的通街都是，到处都能见到，撕掉又来。那么在html这里差不多，譬如经常浏览网页见到的固定在浏览器某个位置，不受滚动条影响的广告。
② position: fixed;只相对浏览器窗口（即body）移动。所以，如果希望用牛皮癣大法完成上图效果，就相当于每个box都要相对body来移动，无论是否嵌入盒子还是平行盒子。
③这里top（前面练习说过，这里是正方形盒子的居中，间距都一样，top=left）的算法，就是把所有间距和边宽都算上，累加，一层加一层，最好先把最外层父元素位置定好，再去设置下一子元素的。

在这里插入图片描述
④打个比方，就是手机里面的app以及你外屏上的污渍。
在这里插入图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>盒子练习——固定定位</title>
<style type="text/css">
body{
    padding: 0px;
    margin: 0px;
    height: 1000px;		/*为了突出固定定位的效果，把高值设多点*/
}
/*500×500*/
.box1{
    border: 5px dotted #000000;
    width: 490px;
    height: 490px;
    position: fixed;	/*设为固定定位属性，使这个最外框跟着整体一起固定，不设置的话，就会随滚动条跑*/
}
/*440×440*/
.box2{
    border: 5px solid #0000ff;
    width: 430px;
    height: 430px;
    position: fixed;
    /*间距25*/
    top: 30px;			/*因为最外box1不做位置挪动处理，相当于0，这里直接 它的间距 + 它的边宽值（border-top-size: 5px;）*/
    left: 30px;
}
/*400×400*/
.box3{
    background-color: #ffa0df;
    width: 400px;
    height: 400px;
    position: fixed;
    /*间距15*/
    top: 45px;			/*累计相加，它父元素的top值 + 它的间距*/
    left: 45px;
}
/*300×300*/
.box4{
    border: 3px dotted #ffffff;
    width: 294px;
    height: 294px;
    position: fixed;
    /*间距50*/
    top: 98px;			/*累计相加，它父元素的top值 + 它的间距 + 它的边宽值（border-top-size: 3px;）*/
    left: 98px;
}
/*280×280*/
.box5{
    border: 3px dotted #ffffff;
    width: 274px;
    height: 274px;
    position: fixed;
    /*间距7*/
    top: 108px;			/*累计相加，它父元素的top值 + 它的间距 + 它的边宽值（border-top-size: 3px;）*/
    left: 108px;
}
/*150×150*/
.box6{
    border: 5px solid #ffff00;
    background-color: #adff2f;
    width: 140px;
    height: 140px;
    position: fixed;
    /*间距62*/
    top: 170px;			/*累计相加，它父元素的top值 + 它的间距 + 它的边宽值（border-top-size: 5px;）*/
    left: 170px;
}
</style>
</head>

<body>
<div class="box1">
	<div class="box2">
		<div class="box3">
			<div class="box4">
				<div class="box5">
					<div class="box6"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<p style="background-color:#f39; color:#ffffff;">请看右边滚动条</p>
</body>
</html>
iuukai
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
position:relative/absolute无法冲破的等级
10-31
2. **使用不同的定位方式**：例如，可以考虑使用`position:fixed`或`position:sticky`来替代`position:absolute`，这样可以绕过层级限制，但需要注意这些定位方式的特殊性。 3. **改变DOM结构**：调整HTML结构，使...
CSS的定位属性
qq_45799465的博客
01-23 3857
使用场景：想要覆盖盒子或移动盒子位置的时候使用。 绝对定位（position：absolute） 文档流 一个盒子给了绝对定位以后，该盒子是悬空不占位置的，并且不会进行移动。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ..
CSS盒模型、position定位、bfc、float浮动流、margin塌陷合并
zyz00000000的博客
09-11 266
1. 盒模型 和模型包括：content区、padding区、border区、margin区 注意：padding和content区的颜色一样；border有自己的颜色； 问：如果border是虚线，那么虚线之间的颜色是什么呢？ 答：跟content、padding颜色一样 有趣的理解：盒模型三个区的颜色：content区是帝都，相邻的padding受content控制，颜色与con...
CSS基本布局——定位
david2000999的博客
11-05 1万+
CSS定位定位(position)1. 为什么使用定位2. 定位详解2.1 边偏移2.2 定位模式 (position)静态定位(static)（废物）相对定位(relative)绝对定位(absolute)固定定位(fixed)3. 定位(position)的扩展3.1 绝对定位的盒子居中3.2 堆叠顺序（z-index）3.3 定位改变display属性4. 定位小结5. 网页布局总结 定位(position) 1. 为什么使用定位 我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？
CSS之定位布局（position，relative定位布局技巧）
梁同学与Android
11-13 1万+
1.什么是定位： css中的position属性，position有四个值：absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局，使用TLBR(top,left,bottom,right)来调整元素位置。 2.各个属性值的描述： *static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分...
position：relative
weixin_44874595的博客
07-30 4万+
1.当将块的position属性设置为relative时，与设置为absolute完全不同，这时子块是相对于其父块来作为参照对象偏移定位，而不是相对于浏览器窗口，并且相对定位的块元素脱离标准流浮上来后，无论是否进行移动，其所占的位置仍然留有空位，后面的无定位块元素不会移动上来，因此，移动元素会导致覆盖其它框。 <!DOCTYPE html> <html lang="en">...
CSS中的position:relative;的作用示例介绍
12-10
在实际的网页设计和开发中，`position`属性的运用是非常广泛的，能够实现各种复杂的布局效果，包括弹出框、导航菜单、浮动提示等。熟练掌握`position`的用法，是成为一名优秀前端开发者的关键技能之一。
position:fixed或absolute时百分比参考屏幕宽度
09-25
position属性的值通常可以是static、relative、absolute、fixed以及后来新增的sticky。当使用position:fixed或position:absolute的时候，元素的定位将会脱离常规文档流，而此时如何设置元素的宽度和位置就变得稍微...
css中position:relative和overflow:hidden之间的问题
09-25
`position`属性用于定义元素的定位模式，它有多种值，如`static`（默认值）、`relative`、`absolute`、`fixed`和`sticky`。当`position`设置为`relative`时，元素保持其正常流中的位置，但可以通过`top`和`left`等...
css中position属性(absolute|relative|static|fixed)概述及应用
09-22
CSS中的`position`属性是用来控制元素的定位方式，它有四个主要值：`static`、`relative`、`absolute`和`fixed`。这些值决定了元素如何在页面布局中定位，以及是否遵循文档流。 1. **静态定位（static）**： - 这...
position之relative
lbs311709000127的博客
01-18 6549
position：relative 作用：是元素成为containing-block，可定位的祖先元素。意思就是绝对定位是的参照元素 特点： 可以使用top|right|bottom|left|z-index进行相对定位，相对的是常规流中自己的位置。 相对定位元素不会离开常规流，意思就是其原来的位置还在，不会被其他后面的元素占有 任何元素都可以设置为relative，...
CSS中的position:relative理解
热门推荐
gamenoover的博客
05-27 7万+
今晚来说说CSS中的position属性，其实在实际开发页面过程中，记录一下这个让我迷茫的relative，我将它分为三种情况进行说明 包含关系：父级absolute，子级relative； 包含关系：父级relative，子级absolute； 并列关系：兄弟标签都是relative； 1.最具常见的用法就是父级标签relative，子级标签position来做到无论浏览器如何改变，都是相对...
定位
m0_46466262的博客
05-23 3001
定位(确定元素的位置) 相对定位(position:relative) 我们以前学过几种布局方式 浮动 从左往右依次排列 正常布局 从上往下依次排 display:inline-block 看上去水平排列,本质上还是文本,有解析空格和垂直对齐的问题 这些能解决掉布局的很多问题,但是对于某些特殊情况 ul{ border: 2px solid pink; } li{ width: 100px; height: 100px; background-color: s
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
csgojingyu的博客
10-21 1万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
position的属性
zuo_zuo_blog的博客
04-06 1万+
1.position: relative;相对定位 不影响元素本身特性，不会使元素脱离文档流，没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）， 提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。） （两个都为定位元素，后面的会覆盖前面的定位） 2.position: absolute 绝对定位 使元素完全脱离文档流（在...
CSS属性详解——position:relative
Wod_7的博客
06-04 5748
CSS中的相对定位relative定位是一种定位方式，与绝对定位absolute定位不同的是，相对定位是根据元素在正常页面流中的位置来定位。相对定位使元素相对于其原始位置上下左右移动。这个过程并不会使元素脱离文档流。
position(五种属性，以及每个属性的特点)
Delicia_Lani的博客
10-28 1万+
1. position: relative;相对定位 1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性） 2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置） 3> 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移） 4>提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越...
css：position / static默认属性 / fixed固定定位 / relative相对定位 / absolute绝对定位 / sticky粘性定位
snowball的博客
03-09 1455
这意味着它将按照在HTML代码中出现的顺序进行显示，并且不会受到其他定位属性（如top、right、bottom或left）的影响。绝对定位，元素的位置相对于其最近的已经定位的父元素，如果最近的父元素没有定位则相对于文档进行定位。2、可以使用top、right、bottom和left属性来定义相对于元素原始位置的偏移量。3、当使用相对定位时，元素不会对其他相对定位或绝对定位的元素产生影响。的元素是文档流的一部分，忽略其他定位属性，如top、right、bottom或left。
position:relative 详解
湛庐无方
03-04 6099
position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位. relative和absolute的另外一个很重要的区别就是当被定义成absolute的对象被移出了，那么他原来的位置也就不存在了， 如果被定义成rela
能够实现相对于自己定位的属性设置是（ ）。 A position:relative; B position:absolute; C position:fixed; D position:none;
最新发布
06-12
答案是 A) position:relative; 和 B) position:absolute;。 A. `position:relative;` 使得元素相对于其正常位置进行定位，不会影响其他元素的布局。你可以使用 `top`, `right`, `bottom`, 或 `left` 属性来设置相...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值