17.前端笔记-CSS-定位

news2024/10/5 13:09:01

1、为什么要定位

先看看以下这些场景是否可以用标准流或浮动实现
（1）某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
（2）滚动窗口时，某些盒子是可以固定在屏幕某个位置的
以上这种场景使用标准流和浮动无法快速实现，此时需要引入定位进行实现
浮动：可以让多个块级盒子一行没有缝隙排列展示，经常用于横向排列盒子
定位：可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子

2、定位组成

定位：将盒子定在某个位置，定位也是在摆放盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式：用于指定一个元素在文档中的定位方式
边偏移：决定了该元素的最终位置

2.1 定位模式

决定元素的定位方式，通过css设置position属性

值语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位

2.1.1 静态定位static

元素默认的定位方式，无定位的意思。还是按照标准流特性摆放位置，没有边偏移
因此定位在布局中很少用到

div{
	position:static;
}

2.1.2 相对定位relative(***)

相对定位是元素在移动位置时，是相对于它原来的位置来说的
（1）参照点是自己原来的位置(left:10px,表示左边相对于原来的位置偏移了10px)
（2）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置，与浮动不同 ）
（3）相对定位可以用来限制绝对定位

div{
	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 {
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
            top:50px;
            left: 50px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

原来：
在这里插入图片描述
相对偏移之后：
在这里插入图片描述

2.1.2 绝对定位（***）

绝对定位是元素在移动位置时，相对于它的祖先元素来说的
语法：

div{
	position:absolute;
}

特点：
（1）没有祖先元素或祖先元素没有定位，则以浏览器为准定位，见示例（1.1）和（1.2）
（2）如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置，见示例（2.1）
（3）绝对定位会脱标，不再占用原先位置。其他标准流元素会占用原来绝对定位元素所在的位置 ,见示例（3.1）
（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>
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 10px;
            left: 10px;
        }
    </style>
</head>
<body>
    <div class="son"></div>
</body>
</html>

在这里插入图片描述
（1.2）有祖先元素，但祖先元素没有定位：以浏览器为准定位

<!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>
        .father{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            bottom: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    
</body>
</html>

在这里插入图片描述
（2.1）祖先元素有定位，以最近一级有定位的祖先元素作为参考
grandfather>father>son
grandfather有定位，father无定位

<!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>
        .grandfather{
            width: 500px;
            height: 500px;
            background-color: antiquewhite;
            position: relative;
        }
        .father{
            width: 400px;
            height: 400px;
            background-color: green;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            bottom: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="grandfather">
        grandfather
        <div class="father">
            father
            <div class="son">son</div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述
（3.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>
        .father{
            width: 500px;
            height: 500px;
            background-color: blanchedalmond;
            position: relative;
        }
        .box1{
            width:100px ;
            height: 100px;
            background-color: green;
            position: absolute;
            right: 200px;
            top:200px
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
    
</body>
</html>

添加绝对定位之前：
在这里插入图片描述
添加绝对定位之后：脱标
在这里插入图片描述

2.1.3 固定定位fixed(***)

固定定位是元素固定于浏览器可视区的位置。
主要使用场景：可以在浏览器页面滚动时，元素的位置不会改变
特点：

(1)以浏览器的可视窗口为参照点移动元素
和父元素没有关系
不随滚动而滚动
(2)固定定位不占用原先的位置（脱标）
固定定位可以看作是特殊的绝对定位

div{
	position:fixed;
}

<!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>
        .png img{
            width: 100px;
            height: 100px;
            position: fixed;
            top:50px;
            left:0px;
        }
    </style>
</head>
<body>
    <div class="png">
        <img src="./1.jpg" alt="">
    </div>
    <div>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
        <p>加油加油</p>
    </div>
</body>
</html>

fixed固定定位

在这里插入图片描述

技巧：固定定位搭配版心右侧

算法：
（1）让固定定位的盒子left:50%,走到浏览器可视区的一半位置（版心）
（2）让固定定位的盒子margin-left:版心宽度的一半距离。版心右侧

<!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{
            width: 800px;
            height: 800px;
            margin: 0 auto;
            background-color: green;
        }
        .bar{
            background-color: pink;
            width: 100px;
            height: 100px;
            position: fixed;
            left:50%;
            margin-left: 400px;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="bar"></div>
    </div>
</body>
</html>

2.1.4 粘性定位sticky

粘性定位可以看作是相对定位和固定定位的混合
实际不常用，IE不兼容。现在网页上看到的类似粘性定位的一般都是使用js实现

div{
position:sticky;
top:10px;
}

特点：
（1）以浏览器的可视窗口为参照点移动元素（固定定位特点）
（2）粘性定位占用原先位置（相对定位特点）
（3）必须添加top\bottom\left\right其中一个属性才生效

<!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{
            width: 100%;
            height: 1000px;
        }
        .nav {
            width: 800px;
            height: 50px;
            margin: 50px auto;
            background-color: green;
            position: sticky;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="nav">导航栏粘性定位</div>
    </div>

</body>

</html>

2.2 边偏移

绝对盒子最终移动到什么位置
有top\bottom\left\right4个属性

边偏移属性示例描述
toptop:80px顶端偏移量，定义元素相对于其父元素上边线的距离
bottombottom:80px底部偏移量，定义元素相对其父元素下边线的距离
leftleft:80px左侧偏移量，定义元素相对其父元素左边线的距离
rightright:80px右侧偏移量，定义元素相对于其父元素右边线的距离

3、子绝父相

子元素是绝对定位的话，父元素要用相对定位。
（1）子元素绝对定位，不会占用位置，可以放到父盒子的任何一个地方，不会影响其他的兄弟盒子
（2）父盒子需要加定位限制子盒子在父盒子内显示，否则子盒子就会以浏览器为基准进行偏移
（3）父盒子布局时，需要占有位置，因此选择绝对定位（不脱标）
总结：父级需要占用位置，因此是相对定位。子盒子不用占用位置，就是绝对定位

注意：子绝父相不是永远不变，如果父元素不需要站位置，子绝父绝也是可以的

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

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

相关文章

# 智慧社区管理系统-核心业务管理-01车位收费

# 智慧社区管理系统-核心业务管理-01车位收费

一 后端 1:entity package com.woniu.community.entity;import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;Data AllArgsConstructor NoArgsConstructor public class CarCharge {private int id;private String payDate;//开始时间pr…
阅读更多...
Vue 官方文档2.x教程学习笔记 1 基础 1.6 Class 与 Style 绑定 1.6.1 绑定HTML Class

Vue 官方文档2.x教程学习笔记 1 基础 1.6 Class 与 Style 绑定 1.6.1 绑定HTML Class

Vue 官方文档2.x教程学习笔记 文章目录Vue 官方文档2.x教程学习笔记1 基础1.6 Class 与 Style 绑定1.6.1 绑定HTML Class1 基础 1.6 Class 与 Style 绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。 因为它们都是 attribute&#xff0c;所以我们可以用 v-b…
阅读更多...
浅析Vue3动态组件怎么进行异常处理

浅析Vue3动态组件怎么进行异常处理

Vue3动态组件怎么进行异常处理&#xff1f;下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法&#xff0c;希望对大家有所帮助&#xff01; 动态组件有两种常用场景&#xff1a; 一是动态路由&#xff1a; // 动态路由 export const asyncRouterMap: Array<RouteRecordR…
阅读更多...
【算法】山东大学人工智能限选课实验一（八数码问题）

【算法】山东大学人工智能限选课实验一（八数码问题）

实验一 八数码问题 1. 题目介绍 八数码问题描述为&#xff1a;在 33 组成的九宫格棋盘上&#xff0c;摆有 8 张牌&#xff0c;每张牌都刻有 1-8 中的某一个数码。棋盘中留有一个空格&#xff0c;允许其周围的某张牌向空格移动&#xff0c;这样通过移动牌就可以不断改变棋盘布…
阅读更多...
【实验报告NO.000001】MIT 6.858 Computer System Security - Lab 1

【实验报告NO.000001】MIT 6.858 Computer System Security - Lab 1

0x00. 一切开始之前 MIT 6.858 是面向高年级本科生与研究生开设的一门关于计算机系统安全&#xff08;secure computer security&#xff09;的课程&#xff0c;内容包括威胁模型&#xff08;threat models&#xff09;、危害安全的攻击&#xff08;attacks that compromise s…
阅读更多...
客快物流大数据项目（九十）：ClickHouse的引擎介绍和深入日志引擎讲解

客快物流大数据项目（九十）：ClickHouse的引擎介绍和深入日志引擎讲解

文章目录 ClickHouse的引擎介绍和深入日志引擎讲解 一、引擎介绍 二、日志引擎
阅读更多...
【大数据趋势】12月3日纳指大概率反弹到黄金分割附近，然后下跌，之后进入趋势选择期，恒指会跟随。感觉或许有什么大事情要发生，瞎猜中。

【大数据趋势】12月3日纳指大概率反弹到黄金分割附近，然后下跌，之后进入趋势选择期，恒指会跟随。感觉或许有什么大事情要发生，瞎猜中。

行情核心源头分析: 纳斯达克指数 是否会符合大数据规则&#xff0c;走黄金分割线规则 回顾一下上周大数据预测的趋势&#xff0c;虽有波折但最终趋势预测准确 上周11.20日大数据模拟出一个趋势图&#xff0c;大趋势上需要继续上涨尾期&#xff0c;制造一个背离出现&#xff0c…
阅读更多...
ZMQ中请求-应答模式的可靠性设计

ZMQ中请求-应答模式的可靠性设计

一、什么是可靠性&#xff1f; 要给可靠性下定义&#xff0c;我们可以先界定它的相反面——故障。如果我们可以处理某些类型的故障&#xff0c;那么我们的模型对于这些故障就是可靠的。下面我们就来列举分布式ZMQ应用程序中可能发生的问题&#xff0c;从可能性高的故障开始&…
阅读更多...
[附源码]计算机毕业设计springboot演唱会门票售卖系统

[附源码]计算机毕业设计springboot演唱会门票售卖系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
总结：原生servlet请求转发url与请求重定向url的使用区别

总结：原生servlet请求转发url与请求重定向url的使用区别

总结&#xff1a;原生servlet请求转发url与请求重定向url的使用区别一演示前提&#xff1a;1.演示案例的项目架构如图&#xff1a;2.设置web应用的映射根目录&#xff1a;/lmf&#xff0c;当然也可以不设置。二什么叫请求转发、请求重定向&#xff1f;1.请求转发解释图2. forwa…
阅读更多...
Windows 文件共享功能使用方法, 局域网多台电脑之间传送文件

Windows 文件共享功能使用方法, 局域网多台电脑之间传送文件

设想一下&#xff0c;家里或者公司有多台电脑&#xff0c;连接同一个Wifi&#xff0c;也就是处于同一个局域网中。 在不能使用微信、网盘的文件传输功能的情况下&#xff0c;这多台电脑之间&#xff0c;就只能用U盘传送数据吗&#xff1f; 不。Windows系统中已经提供了文件共享…
阅读更多...
关于DDR协议一些操作的理解1

关于DDR协议一些操作的理解1

整体流程： 一些基本概念： 1.p_bank和l_bank 2.rank和bank 3.DIMM和SIMM 4.DLL概念： DDR控制器架构： 时钟频率对比： （1）
阅读更多...
（1-线性回归问题）RBF神经网络

（1-线性回归问题）RBF神经网络

直接看公式&#xff0c;本质上就是非线性变换后的线性变化&#xff08;RBF神经网络的思想是将低维空间非线性不可分问题转换成高维空间线性可分问题&#xff09; Deeplearning Algorithms tutorial 谷歌的人工智能位于全球前列&#xff0c;在图像识别、语音识别、无人驾驶等技…
阅读更多...
wy的leetcode刷题记录_Day56

wy的leetcode刷题记录_Day56

wy的leetcode刷题记录_Day56 声明 本文章的所有题目信息都来源于leetcode 如有侵权请联系我删掉! 时间&#xff1a;2022-11-30 前言 目录wy的leetcode刷题记录_Day56声明前言895. 最大频率栈题目介绍思路代码收获236. 二叉树的最近公共祖先题目介绍思路代码收获895. 最大频率…
阅读更多...
React项目中Manifest: Line: 1, column: 1, Syntax error的解决方法

React项目中Manifest: Line: 1, column: 1, Syntax error的解决方法

大家好&#xff0c;今天和大家分享一个React项目中的一个小报错的解决方法。 在创建了一个项目后会有几个文件 public ---- 静态资源文件夹 favicon.ico ------ 网站页签图标 index.html -------- 主页面 logo192.png ------- logo图 logo512.png ------- logo图 manifest.js…
阅读更多...
如何将C/C++代码转成webassembly

如何将C/C++代码转成webassembly

概述 WebAssembly/wasm WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式 官网 &#xff1a; WebAssembly 快速上手&#xff1a; I want to… - WebAssemblyhttps://webassembly.org/getting-started/developers-guide/ 其实官网写的很详细&#xf…
阅读更多...
局域网综合设计-----计算机网络

局域网综合设计-----计算机网络

局域网综合设计 信息楼的配置 拓扑图 配置 全部在三层交换机配置 1.创建两个全局地址池vlan 52和valn53 全局地址池vlan52 全局地址池vlan53 2给vlan 52 和53 配置IP 地址 给vlan52配置ip并开启vlan52从全局地址池获取IP 子网 dns 给vlan53配置ip并开启vlan53从全局…
阅读更多...
Android入门第37天-在子线程中调用Handler

Android入门第37天-在子线程中调用Handler

简介 前一章我们以一个简单的小动画来解释了Handler。 这章我们会介绍在子线程里写Handler。如果是Handler写在了子线程中的话,我们就需要自己创建一个Looper对象了&#xff1a;创建的流程如下: 直接调用Looper.prepare()方法即可为当前线程创建Looper对象,而它的构造器会创…
阅读更多...
Java并发编程—线程池

Java并发编程—线程池

文章目录线程池什么是线程池线程池优点&#xff1a;线程复用技术线程池的实现原理是什么线程池执行任务的流程&#xff1f;线程池如何知道一个线程的任务已经执行完成线程池的核心参数拒绝策略线程池类型&#xff08;常用线程池&#xff09;阻塞队列执行execute()方法和submit(…
阅读更多...
[附源码]计算机毕业设计springboot医疗纠纷处理系统

[附源码]计算机毕业设计springboot医疗纠纷处理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023