CSS定位详解

news2024/11/14 15:53:27

文章目录

    • 定位
        • 为什么要使用定位
        • 定位的组成
          • 定位模式
            • 静态定位:按照标准流特性摆放,没有边偏移
            • 相对定位:元素在移动位置的时候,是相对于它原来的位置来说的
            • 绝对定位:在移动位置的时候相对与祖先元素
            • 固定定位:元素固定于浏览器可视区的位置。浏览器随页面滚动时元素的位置不会改变
            • 粘性定位:相对定位和固定定位的混合
          • 子绝父相
          • 边偏移
        • 定位的叠放次序z-index(z轴)
        • 定位的特殊特性
    • demo(轮播图)

定位

为什么要使用定位

  1. 某个元素可以在一个盒子内移动位置,并压住其他盒子
  2. 滚动窗口时,盒子固定在屏幕

定位的组成

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

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式,边偏移决定了该元素的最终位置。

定位模式

position:static | relative | absolute | fixed | sticky

默认:静态定位 |相对定位 | 绝对定位 | 固定定位 | 粘性定位

静态定位:按照标准流特性摆放,没有边偏移
相对定位:元素在移动位置的时候,是相对于它原来的位置来说的
  1. 相对于原来的位置移动
  2. 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来位置)

因此,相对定位没有脱标,它最典型的应用就是给绝对定位当爹

绝对定位:在移动位置的时候相对与祖先元素
  1. 如果没有祖先元素或祖先元素没有定位,则以浏览器为准定位
  2. 如果祖先元素有定位,则会依据最近一级祖先元素为参考移动
  3. 脱标(比浮动飘的高)

居中算法:加了==绝对定位的盒子不能通过margin:0 auto;==水平居中

  1. 让绝对定位的盒子left:50%,走到父盒子的一半;
  2. margin负值,往回走盒子宽度的一半。

垂直居中同理

固定定位:元素固定于浏览器可视区的位置。浏览器随页面滚动时元素的位置不会改变
  1. 以浏览器可视窗口为参照
  2. 跟父元素没有任何关系
  3. 不随滚动条滚动
  4. 脱标

**固定定位小技巧:**固定到版心右侧

  1. 让固定定位的盒子left:50%,走到浏览器可视区即版心的一半;
  2. 让固定的盒子margin-left:版心宽度的一半距离,多走版心宽度的一半位置。
粘性定位:相对定位和固定定位的混合
  1. 以浏览器可视窗口为参照移动(固定定位)
  2. 占有原先位置(相对定位)
  3. 必须添加top、left、right、bottom

例如:将页面滚动到一定的位置后元素变为固定定位效果(IE

子绝父相
  1. 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子
  2. 父盒子加相对定位,占有位置
边偏移

定位的盒子移动的最终位置、有top、bottom、left、right属性

如果一个盒子同时又四个属性,执行先左后右,先上后下

定位模式是否脱标移动位置
static静态定位不能使用边偏移
relative相对定位相对于自身位置偏移
absolute绝对定位带有定位的父级
fixed固定定位浏览器可视区
sticky粘性定位浏览器可视区

定位的叠放次序z-index(z轴)

  • 数值可以是正整数、负整数、0,越大越靠上
  • 属性值相同则后来者居上
  • 数字后不能加单位
  • 只有定位的盒子才有z-index属性

定位的特殊特性

与浮动类似

  1. 行内元素添加绝对或固定定位,可以直接设置宽度和高度
  2. 块级元素添加绝对或固定定位,如果不给宽度或高度,默认大小是内容的大小
  3. 脱标都不会触发边距塌陷

与浮动不同

  1. 绝对定位和固定定位会压住下面的文字和内容

demo(轮播图)

        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .tb-promo {
            position: relative;
            width: 520px;
            height: 280px;
            margin: 100px auto;
        }

        .tb-promo img {
            width: 520px;
            height: 280px;
        }

        /*并集选择器可以集体声明相同样式*/
        .prev,
        .next {
            position: absolute;
            /*绝对定位盒子垂直居中*/
            top: 50%;
            margin-top: -15px;
            /*绝对定位可以直接设置宽度和高度*/
            width: 20px;
            height: 30px;
            background: rgba(0, 0, 0, 0.3);
            text-decoration: none;
            text-align: center;
            line-height: 30px;
            color: #fff;
        }

        .prev {
            left: 0;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .next {
            right: 0;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }

        .promo-nav {
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 7px;
        }

        .promo-nav li {
            float: left;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
            margin: 3px;
        }

        .promo-nav .select {
            background-color: #ff5000;
        }
    <div class="tb-promo">
        <img src="image/tb.jpg" alt="">
        <!--左侧按钮-->
        <a href="#" class="prev">&lt;</a>
        <!--右侧按钮-->
        <a href="#" class="next">&gt;</a>
        <!--圆点-->
        <ul class="promo-nav">
            <li class="select"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/197381.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C语言:指针详解

往期文章 C语言&#xff1a;初识C语言C语言&#xff1a;分支语句和循环语句C语言&#xff1a;函数C语言&#xff1a;数组C语言&#xff1a;操作符详解 目录往期文章前言1. 指针是什么2. 指针和指针类型3. 野指针4. 指针运算4.1 指针-整数4.2 指针-指针4.3 指针的关系运算5. 二…

“小灵通”的风雨往事

最近&#xff0c;有一部叫做《狂飙》的国产电视剧火遍全网&#xff0c;相信大家都看到了。在剧中&#xff0c;出现了一个通信名词&#xff0c;不知道在座各位有没有关注到。没错&#xff0c;这个名词&#xff0c;就是“小灵通”。《狂飙》剧的主角高启强&#xff0c;原本是个卖…

Web3.0 · 基础层技术 · SCQA模型趣谈密码学

【小木箱成长营】密码学系列教程&#xff1a; Web3.0 基础层技术 密码学在移动端应用与实践 一、序言 Hello&#xff0c;我是小木箱&#xff0c;欢迎来到小木箱成长营密码学系列教程&#xff0c;今天将分享 Web3.0 基础层技术 SCQA 模型趣谈密码学。 SCQA 模型趣谈密码学主…

第一章 opencv与python介绍及环境搭建

目录1.python安装2.opencv3.pycharm安装4.conda环境搭建(my)1.python安装 网上教程很多就不写了&#xff0c;推荐使用python3.8.2及以上版本 2.opencv opencv简单介绍&#xff1a;opencv是一个开源的计算机视觉库&#xff0c;可以在windows、MacOS、Linux等操作系统上运行。 …

Day878.count(*)问题 -MySQL实战

count(*)问题 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于count(*)问题。 在开发系统的时候&#xff0c;可能经常需要计算一个表的行数&#xff0c;比如一个交易系统的所有变更记录总数。 这时候可能会想&#xff0c;一条 select count(*) from t 语句不就解决…

【自动化测试】从0开始玩转docker—— 02软件配置

目的 CI / CD在目前各类互联网企业中已然成为推动软件开发行为的重要基础设施服务。同样的对于测试团队来说更是有着举足轻重的重大意义&#xff0c;无论是测试左移的具象化提现亦或是持续测试的顺利开展&#xff0c;掌握这一技能已是广大软件测试工程师的必修课。分享这一技术…

第一章:3D点云应用领域分析

&#x1f31e;欢迎来到点云的世界 &#x1f308;博客主页&#xff1a;卿云阁 &#x1f48c;欢迎关注&#x1f389;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f31f;本文由卿云阁原创&#xff01; ✉️希望可以和大家一起完成进阶之路&#xff01; &#x1f64f;作者…

力扣(LeetCode)401. 二进制手表(2023.02.03)

二进制手表顶部有 4 个 LED 代表 小时&#xff08;0-11&#xff09;&#xff0c;底部的 6 个 LED 代表 分钟&#xff08;0-59&#xff09;。每个 LED 代表一个 0 或 1&#xff0c;最低位在右侧。 例如&#xff0c;下面的二进制手表读取 “3:25” 。 &#xff08;图源&#xff…

C语言基础知识(56)

下面的C程序的输出是什么#include<stdio.h>intmain(){int a 0;while(a <printf("HI")){a;}return0;}该代码将打印 3 次HI。 printf()函数将返回它正在打印的字符数&#xff0c;并将其与a进行比较。 由于 printf() 的返回值为 2&#xff0c;HI 将被打印 2 次…

字符函数和字符串函数

&#x1f331;博客主页&#xff1a;大寄一场. &#x1f331;系列专栏&#xff1a;C语言学习笔记 &#x1f618;博客制作不易欢迎各位&#x1f44d;点赞⭐收藏➕关注 目录 前言 一、字符串函数 1. 1 strlen 2. 长度不受限制的字符串函数&#xff08;操作的是整个字符串&#…

Linux-用户权限相关命令

1.用户和权限的基本概念1.1基本概念用户是Linux系统工作中重要的一环&#xff0c;用户管理包括用户与组管理在Linux系统中&#xff0c;不论是由本机或是远程登录系统&#xff0c;每个系统都必须拥有一个账号&#xff0c;并且对于不同的系统资源拥有不同的使用权限在Linux中&…

DAMA数据管理知识体系指南之数据操作管理

第6章 数据操作管理 6.1 简介 数据操作管理是结构化数据的开发、维护和支持的活动&#xff0c;使企业数据资源达到最佳的利用价值。数据操作管理包括两项子职能&#xff1a;数据库支持和数据技术管理。 数据操作管理的目标是&#xff1a; &#xff08;1&#xff09;保护和确保…

SpringBoot 如何保证接口安全?老鸟们都是这么玩的!

大家好&#xff0c;我是飘渺。 对于互联网来说&#xff0c;只要你系统的接口暴露在外网&#xff0c;就避免不了接口安全问题。如果你的接口在外网裸奔&#xff0c;只要让黑客知道接口的地址和参数就可以调用&#xff0c;那简直就是灾难。 举个例子&#xff1a;你的网站用户注册…

【NS2学习笔记】tcl与c++互相调用/传参

在NS2&#xff0c;做实验的时候&#xff0c;为了能通过循环配合传值实验&#xff0c;一直找不到tcl传参给c的方法&#xff0c;网上的只po出一部分看不懂&#xff0c;只能通过源码自己研究。最后的解决办法就是&#xff0c;模仿源码的操作&#xff0c;以下通过tcl→ex→sat-irid…

Python如何删除列表中的重复元素?

嗨嗨&#xff0c;大家晚上好 ~ 又来给你们分享小妙招啦 在python列表有重复元素时&#xff0c;可以有以下几种方式进行删除 觉得不错的话&#xff0c;赶紧学起来用用吧 &#xff01; 直接遍历列表删除 l1 [1, 1, 2, 2, 3, 3, 3, 3, 6, 6, 5, 5, 2, 2]for el in l1:if l1.coun…

Java之动态规划的背包问题

目录 动态规划问题 一:01背包问题 1.问题描述 2.分析问题 3.代码实现(二维数组) 4.滚动数组实现(一维数组) 二:完全背包问题 1.题目描述 2.问题分析 3.代码实现 动态规划问题 动态规划(Dynamic Programming)算法的核心思想是:将大问题划分为小问题,进行解决&#xff…

若依代码生成器-Domain代码生成篇(一)

若依代码生成器的前一段代码的阅读&#xff0c;我们了解了若依代码生成器的一些逻辑&#xff0c;包括通过数据库的information_schema. TABLES查询表信息&#xff0c;以及information_schema. COLUMNS查询指定表的列信息&#xff0c;将其转换到表gen_table与gen_table_column中…

SETR项目运行记录

项目简要介绍 全称为Swin-Transformer-Semantic-Segmentation&#xff0c;看名字我们就知道使用的是transformer&#xff0c;做的是语义分割方面&#xff0c;使用的数据集是Cityscapes。在本文中我们并不对其原理进行解读&#xff0c;只是调试运行该项目。 项目下载地址&#…

2023年深圳CPDA数据分析师认证将于2/25正式开班,快来报名

CPDA数据分析师认证是中国大数据领域有一定权威度的中高端人才认证&#xff0c;它不仅是中国较早大数据专业技术人才认证、更是中国大数据时代先行者&#xff0c;具有广泛的社会认知度和权威性。 无论是地方政府引进人才、公务员报考、各大企业选聘人才&#xff0c;还是招投标加…

C++这么难,为什么我们还要学习C++?

文章目录前言1. 为什么难学2. C的意义3. 什么时候该用C4. 如何学习C5. 学前勉言前言 C 可算是一种声名在外的编程语言了。这个名声有好有坏&#xff0c;从好的方面讲&#xff0c;C 性能非常好&#xff0c;哪个编程语言性能好的话&#xff0c;总忍不住要跟 C 来单挑一下&#x…