网页布局方式之定位

最新推荐文章于 2023-07-24 16:48:57 发布

mistys_city

最新推荐文章于 2023-07-24 16:48:57 发布

阅读量903

点赞数

文章标签： css css3 html5

本文链接：https://blog.youkuaiyun.com/mistys_city/article/details/126796016

版权

本文详细介绍了网页布局中的定位概念，包括静态定位、相对定位、绝对定位和固定定位。静态定位遵循标准流，相对定位在原有位置基础上偏移，不脱离标准流；绝对定位相对于最近的定位祖先元素移动，脱离标准流；固定定位始终相对于浏览器视口，同样脱离标准流。文章还通过实例演示了子元素相对于父元素定位的技巧及其特殊情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先了解一下标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见的标准流排列方式、

块级元素：从上往下，垂直布局，独占一行

行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

了解标准流是为了后面定位做准备，让我们回到定位上面来，首先了解一下定位的属性名

position：

常见的属性值：

静态定位：static

相对定位：relative

绝对定位：absolute

固定定位：fixed

水平方位：左left 右right

垂直方位：上top 下bottom

注意：偏移值是距偏移方向的距离。

静态定位

静态定位是默认值，就是之前认识的标准流

position：static

注意：

不能使用偏移值

静态定位就是之前标准流，不能通过方位属性进行移动

之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定

相对定位

position：relative

特点：

需要配合方位属性实现移动

相对于自己原来位置进行移动

在页面中占位置没有脱标

绝对定位

position：absolute

特点：

需要配合方位属性实现移动

默认相对于浏览器可视区域进行移动

在页面中不占位置已经脱标（脱离标准流）

绝对定位相对于谁移动？

祖先元素中没有定位默认相对于浏览器进行移动

祖先元素中有定位相对于最近的有定位的祖先元素进行移

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.son {

position:absolute;

/* 方位属性 */

left: 100px;

top:100px;

width: 100px;

height: 100px;

background-color: yellow;

}

</style>

</head>

<body>

<div class="son"></div>

</body>

</html>

子绝父相

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.box {

/* 父亲给相对定位 */

position: relative;

/* 盒子居中 */

margin: 0 auto;

/* 宽 */

width: 400px;

/* 高 */

height: 400px;

/* 背景颜色 */

background-color: teal;

}

.son {

/* 儿子给绝对定位 */

position:absolute;

/* 方位属性 */

/* 距离左边100px */

left: 100px;

/* 距离上边100px */

top:100px;

width: 100px;

height: 100px;

background-color: yellow;

}

</style>

</head>

<body>

<div class="box">

<div class="son"></div>

</div>

</body>

</html>