CSS中的三种基本的定位机制和使用场景

最新推荐文章于 2024-05-17 21:20:19 发布

qq_38577700

最新推荐文章于 2024-05-17 21:20:19 发布

阅读量1.7k

点赞数 1

分类专栏： css

原文链接：https://www.cnblogs.com/iceflorence/p/5798553.html

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

番外

最近降温了，开始爱上化妆，以前是个化妆小白，就是单纯的觉得画完装精致，但是想要画好真的是太考验手法了，特别是眉毛的画法。今天早上没有人给我开服务，那就学习学习，顺带记录记录生活吧！

CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

一、普通流

除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。

二、定位

为什么需要定位

大家先考虑下面情况使用标准流以及浮动是否能实现吗？
某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
当我们滚动窗口的时候，盒子是固定在屏幕的某个位置的。
很明显，以上效果，在标准流和浮动都无法快速实现，此时需要定位来实现。

定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置：

属性值	描述
static	静态定位(默认定位方式）
relative	相对定位
absolute	绝对定位（相对于 static 定位以外的第一个父元素进行定位。脱离文档流，不占据空间，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定）
fixed	固定定位（脱离所有元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。）
sticky	粘性定位

使用场景

在这里插入图片描述

相对定位

被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。如”left:20px” 会使元素的left距离原来的位置添加 20 像素

<html>
<head>
<style type="text/css">
    .box1{
        background-color: red;
        width:100px;
        height:100px;
    }
    .box2{
        background-color: yellow;
        width:100px;
        height:100px;
        position: relative;
        left: 20px;
    }
    .box3{
        background-color: blue;
        width:100px;
        height:100px;
        position: relative;
        right: 20px;
    }
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>

效果如下图所示：

在这里插入图片描述

绝对定位

相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就相对于最初的包含块（如body）。绝对定位的框可以从它的包含块向上、右、下、左移动。
　　绝对定位的框脱离普通流，所以它可以覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序。

<html>
<head>
<meta charset="utf-8">
<style>
*{margin: 0; padding: 0;}
#div1 {
    width: 200px;
    height: 200px;
    background: yellow;
}
#div2 {
    width: 50%;
    height: 50%;
    background: red;
    top: 100px;
    left: 100px;
    position: absolute;
}
</style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
</div>
</body>
</html>

在这里插入图片描述

固定定位

相对于浏览器窗口，其余的特点类似于绝对定位。

粘性定位(新属性值)

粘性定位可以被认为是相对定位和固定定位的混合。
粘性定位的特点：
以浏览器的可视窗口为参照系移动元素(固定定位特点)
粘性定位占有原先的位置(相对定位特点)
必需添加top、left、right、bottom中的一个才有效
缺点：兼容性差，IE不支持
使用场景：当滚动条到达某一位置时，这个粘性定位的容器才不随滚动条移动而移动。

三、浮动

浮动的框可以在左右移动，直到它的外边框边缘碰到包含框或另一个浮动框的边缘。浮动的框脱离普通流。
如果包含块太窄，无法容纳水平排列的浮动元素，那么其他浮动块向下移动，直到有足够多的空间。如果浮动元素的高度不同，那么当它们向下移动时可能会被其他浮动元素卡住。(后面还有一部分没写完，下次补上)

qq_38577700

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS中的三种基本的定位机制和使用场景

番外最近降温了，开始爱上化妆，以前是个化妆小白，就是单纯的觉得画完装精致，但是想要画好真的是太考验手法了，特别是眉毛的画法。今天早上没有人给我开服务，那就学习学习，顺带记录记录生活吧！CSS 定位机制CSS 有三种基本的定位机制：普通流、浮动和绝对定位。一、普通流除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。二、定位为什么需要定位大家先考虑下
复制链接

扫一扫