定位及元素的显示和隐藏

最新推荐文章于 2024-05-08 22:33:14 发布

VIP文章芋泥丶

最新推荐文章于 2024-05-08 22:33:14 发布

阅读量1.2k

点赞数 6

分类专栏：前端文章标签： css3 css 前端

本文链接：https://blog.csdn.net/m0_53619602/article/details/124996972

版权

一、定位

将盒子定在某一个位置 ,所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位由 定位模式+边偏移组成，接下来先来了解定位模式。

1.定位模式

position属性

position属性用于指定一个元素在文档中的定位方式。

static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位

static静态定位

默认定位方式，无定位的意思。按标准流特性摆放位置，没有边偏移

relative相对定位

position：relative；

元素在移动位置的时候，是相对与它原来的位置来说的 (移动位置的时候参照点是自己原来的位置)
原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。( 不脱标,继续保留原来位置)

如下图，盒子未定位时处于粉色盒子的位置，当给盒子添加相对定位后，盒子是根据粉色粉色盒子的位置来移动的，即自己原来的位置。

如下代码

<!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>
        .box1 {
            position: relative;
            width: 200px;
            height: 200px;
            top: 100px;
            left: 100px;

最低0.47元/天解锁文章

芋泥丶

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
5
评论
定位及元素的显示和隐藏

一、定位将盒子定在某一个位置 ,所以定位也是在摆放盒子，按照定位的方式移动盒子。定位由定位模式+边偏移组成，接下来先来了解定位模式。1.定位模式position属性position属性用于指定一个元素在文档中的定位方式。static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 sticky 粘性定位 static静态定位默认定位方式，无定位的意思。按标准流特性摆放位置，没有边偏移.
复制链接

扫一扫