css基础之常用定位

最新推荐文章于 2024-08-02 18:01:26 发布
最新推荐文章于 2024-08-02 18:01:26 发布
阅读量147 收藏 1
点赞数 1
分类专栏： 前端 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/greek7777/article/details/120209782
版权
本文深入探讨了网页布局中的定位技术，包括相对定位、绝对定位、固定定位和静态定位。详细阐述了各种定位的特点、应用场景，并通过实例演示了它们的工作原理和效果，帮助读者理解如何利用CSS定位实现复杂网页设计。
摘要由CSDN通过智能技术生成

文章目录

1、何为定位

定位指的是指定一个元素在网页上的位置，网页中行内元素在一行从左往右依次排列，块级元素垂直摆放，而定位呢就可以将其位置发生变化，上下左右均可移动，还可以脱离文档流，固定某个位置。

2、定位有哪些

2.1、相对定位

特点

  1. 使用属性position:relative表示
  2. 参考元素:是自己，偏移量和最初的自己做对比
  3. 不会脱离文档流，最初的位置，不会被其他元素填充
  4. 尝尝和使用绝对定位的孩子子元素搭配使用
  5. 并且常常和属性z-index进行网页元素层级划分

案例演示1

<!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>
        body {
            padding: 0;
            margin: 0;
        }

        div {
            background-color: antiquewhite;
            width: 200px;
            height: 200px;
            position: relative;
            left: 200px;
            top: 200px;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

效果

请添加图片描述
在这里插入图片描述
在这里插入图片描述

案例演示2 子绝父相

1、源码实现

<!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>
        body {
            padding: 0;
            margin: 0;
        }

        #father {
            background-color: antiquewhite;
            width: 200px;
            height: 200px;
            position: relative;
            /* left: 200px;
            top: 200px; */
        }

        #son {
            background-color: purple;
            width: 60px;
            height: 60px;
            position: absolute;
            left: 60px;
            top: 60px;
        }
    </style>
</head>

<body>
    <div id="father">
        <div id="son"></div>
    </div>
    <span>可能会填充的元素</span>
</body>

</html>

2、效果图
在这里插入图片描述

案例演示3 搭配z-index使用

1、源码实现

<!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>
        body {
            padding: 0;
            margin: 0;
        }

        #father {
            background-color: antiquewhite;
            width: 200px;
            height: 200px;
            position: relative;
            left: 200px;
            top: 200px;
        }
        
        #son {
            background-color: purple;
            width: 60px;
            height: 60px;
            position: absolute;
            left: 160px;
            z-index: -2;
            top: 160px;
        }
        #grandson {
            z-index: -1;
            background-color: red;
            width: 20px;
            height: 20px;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
</head>

<body>
    <div id="father">
        <div id="son">

            <div id="grandson"></div>
        </div>
    </div>
    <span>可能会填充的元素</span>
</body>

</html>

2、效果图
在这里插入图片描述

特性简要说明

第二点：如图所示
在这里插入图片描述

第三点：span标签并未占据定位之后div位置
第四点：如案例演示2
第五点：如案例演示3

2.2、绝对定位

特点

  1. 元素设置样式通过position:absolute
  2. 参考对象是离自己最近的父元素
  3. 脱离文档流，原来的位置被填充，好像不存在似的
  4. 若是父元素没有设置定位的话，以HTML为参考对象
  5. 常和z-index搭配使用，提升层级

案例演示1

1、源码实现

<!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>
        body {
            padding: 0;
            margin: 0;
        }

        div {
            background-color: antiquewhite;
            width: 200px;
            height: 200px;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
</head>

<body>
    <div> </div>
    <span>可能会占据定位元素的位置</span>
</body>

</html>

2、效果图

请添加图片描述

案例演示2 搭配z-index使用

1、源码实现

<!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>
        body {
            padding: 0;
            margin: 0;
        }

        #father {
            background-color: antiquewhite;
            width: 200px;
            height: 200px;
            position: absolute;
            left: 200px;
            top: 200px;
        }
        
        #son {
            background-color: purple;
            width: 60px;
            height: 60px;
            position: absolute;
            left: 160px;
            z-index: -2;
            top: 160px;
        }
        #grandson {
            z-index: -1;
            background-color: red;
            width: 20px;
            height: 20px;
            position: absolute;
            left: 50px;
            top: 50px;
        } 
    </style>
</head>

<body>
    <div id="father">
        <div id="son">
            <div id="grandson"></div>
        </div>
    </div>
    <span>可能会占据定位元素的位置</span>
</body>

</html>

2、效果图
在这里插入图片描述

2.3、固定定位

特点

  1. 元素设置样式通过position:fixed
  2. 参考对象是以浏览器左上角
  3. 脱离文档流，好似不存在
  4. 不会随滚动条滚动
  5. 常和z-index搭配使用，提升层级
  6. 和绝对定位区别:是否随着滚动条滚动而滚动

案例演示1

1、源码实现

<!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>
        body {
            padding: 0;
            margin: 0;
        }

        #father {
            background-color: antiquewhite;
            width: 200px;
            height: 200px;
            position: fixed;
            left: 200px;
            top: 200px;
        }

        #son {
            background-color: purple;
            width: 60px;
            height: 60px;
            position: fixed;
            left: 160px;
            z-index: -2;
            top: 160px;
        }

        #grandson {
            z-index: -1;
            background-color: red;
            width: 20px;
            height: 20px;
            position: fixed;
            left: 50px;
            top: 50px;
        }
    </style>
</head>



<body>
    <div id="father">
        <div id="son">
            <div id="grandson"></div>
        </div>
    </div>
    <span>可能会占据定位元素的位置</span>
</body>

</html>

2、效果图
在这里插入图片描述

简要说明

第六点：如图所示
请添加图片描述

2.4、静态定位

  • 元素默认不设置position属性就是 position:static
  • 行内元素左右排序，块级元素垂直摆放

3、仓库地址

欢迎来骚扰

geekmice
关注
专栏目录
web前端零基础入门学习教程之CSS的常用技巧放送
01-08
对于零基础的初学者来说，掌握一些基本的CSS技巧能够极大地提升编码效率和页面的可读性。以下是对标题和描述中提到的CSS常用技巧的详细解释： 一、CSS缩写 CSS缩写是通过合并多个相关的属性来减少代码量，提高代码...
利用CSS定位背景图片的常用方法总结
09-24
在CSS中，背景图片的定位是一项基础且重要的技能，它能帮助我们实现各种美观的页面布局和设计。本文将详细讲解三种不同的方法来定位背景图片，适用于不同场景和需求。 首先，我们来看一种常见的方法——无依赖的...
CSS属性之定位
qq_41583484的博客
02-23 984
CSS属性之定位 定位（position）作为CSS中使用频率较高的几大类属性之一，在页面布局，排版，页面功能化方面起着不可或缺的作用，其作为CSS基础中的一个较难点，成为了很多前端入门者学习的困扰，接下来我们来聊聊CSS中定位的那些事。 顾名思义，浮动强调悬浮，定位强调位置，定位的关键点在于其位置以及参照物的选取。 定位有以下几种常用属性：relative（相对），absolute（绝对），fi...
web基础之CSS
最新发布
Yunzhong_jiuxiao的博客
08-02 1156
css属性
HTML常用标签&CSS基础
m0_73908308的博客
03-31 1037
CoffeeMilk注：自定义列表项以dt开始，自定义列表项的定义以dd开始。
css中的定位详解
2401_84092456的博客
04-19 971
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！减轻大家的负担。**[外链图片转存中…(img-Lz5jcROs-1713476063704)]
java程序员之-css基础
huangyunming的博客
11-07 7764
我睡了，你也睡了！ 　　我哭了，你却笑了！　　世界总是那么狭小，却突然变得那么大，那么小是因为我们相遇，突然变得那么大是因为世分两地！　　我想你，而你却没有那么想我，其实我不会太惆怅，因为你还不懂我！　　所以我笑了，你哭了！　　我笑了，是因为我太自恋了，以为你知道我的爱！　　你哭了，是因为我对于你重要了！　　如果我重要了，我还爱着你，那么就在一起吧！　　我笑了，你哭了！　　我高兴的笑了，你激动得哭了！　　如果你没有离开，怎么会发现我的存在！　　如果我毅然挽留，怎么会让你自由！ css根据使用场
CSS常用样式
weixin_53988377的博客
07-24 1万+
CSS常用属性集合
css布局和定位
二师弟的博客
03-12 968
参考优秀的 CSS 布局和设计可以帮助我们学习和了解 CSS 的最佳实践，提高自己的 CSS 技能和设计水平
CSS基础知识汇总
ximu__l的博客
06-07 1230
本文是关于CSS技术的基础内容，详细展列了CSS技术相关的基础。
网页制作基础学习——HTML+CSS常用代码
热门推荐
北辰的博客
02-01 4万+
HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
CSS2入门基础
weixin_50336251的博客
06-07 656
CSS基础
CSS中的四种定位区别详解
01-21
我们都知道，前端开发里面的CSS中常用的定位方式有 普通定位，相对定位，绝对定位、固定定位定位这四种。 但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和区别，在使用的时候都很不灵活，要知道，想...
运行报错Parsing error: The keyword ‘import‘ is reserved
极客鼠之家
08-16 3万+
问：运行报错Parsing error: The keyword ‘import’ is reserved 答： 分析： 这是因为我们还没有在配置文件.eslintrc中配置parserOptions来指定语言版本为和模块类型。 在.eslintrc添加如下配置 { "parserOptions": { "ecmaVersion": 7, "sourceType": "module" } } ...
postman测试@pathvariable,@requestparam,@requestbody发送情况
极客鼠之家
08-15 5129
postman测试@pathvariable,@requestparam,@requestbody发送情况 1、三种方式简单说明 1.1、@Pathvariable 通过占位符的方式获取入参，前端示例：url:http://localhost:8080/system/student/${stuSno} 也即是从路径里面去获取变量 后端： /** * @param stuSno 学号 * @return 学生信息 * @description 根据主键获取学生信息
p标签设置宽高问题
极客鼠之家
09-10 4688
1、代码实现 <!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"> <titl
el-tab用户实现单选多选功能（@row-click，@selection-change）以及取消选中
极客鼠之家
08-18 4156
1、效果图 1.1、默认选中效果 1.2、单选，多选，全选效果 2、实现代码 <template> <el-table :data="tableData3" ref="multipleTable" @row-click="handleCurrentChange" @selection-change="selsChange" > <el-table-column type="selection" width="55">&l
原生table表格实现行合并，列合并
极客鼠之家
09-24 3446
文章目录1、效果图2、源码实现 1、效果图 2、源码实现 <template> <div> <table border="1" center style="margin:200"> <tbody> <tr v-for="(item, index) in originData" :key="index"> <td rowspan="4">法定代表人</td>
vue实现用户点击按钮右侧滑动页面
极客鼠之家
09-10 2736
1、需求说明 移动端开发中，用户点击标签元素实现右侧滑出页面 2、效果图 3、源码实现 <template> <div id="app"> <!-- <img alt="Vue logo" src="./assets/logo.png" /> <HelloWorld msg="Welcome to Your Vue.js App" /> --> <button @click="nav = true">跳转&
HTML与CSS基础：常用CSS属性详解
本资源主要介绍了最常用的CSS属性及其含义，同时结合HTML与CSS基础，深入讲解了HTML文档的基本结构。首先，HTML文档是互联网上广泛使用的文档类型，由HTML标记、头部信息和文本主体三部分构成。HTML文档以`<html>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值