CSS部分-第八节定位

定位
1 为什么需要定位？
1.如果我想让某个元素在页面或者某个盒子中自由的移动，并且压住别的盒子该怎么办？
2.当我们在滚动页面的时候，想让某个盒子固定不动怎么办？（侧导航栏）
以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。
所以：

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

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

其中定位模式有四种，可以通过CSS里面的position来设置，分别为：
static：静态定位
relative：相对定位
absolute：绝对定位
fixed：固定定位

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性

3.静态定位
静态定位是元素的默认定位方式，无定位的意思。
语法：

选择器 { position: static; 
}

静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到

4.相对定位relative

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

选择器 { position: relative; 
}

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

例如：
效果：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS定位之相对定位</title><style>/*相对定位relative(占有原来的位置)*/.div1 {width: 300px;height: 300px;border-radius: 50%;border: 10px solid red;position: relative;top: 100px;left: 400px;}.div2 {width: 300px;height: 300px;border-radius: 50%;border: 10px solid green;}.box {margin: auto;width: 1000px;height: 1000px;}</style>
</head>
<body>
<div class="box"><div class="div1"></div><div class="div2"></div>
</div>
</body>
</html>

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

选择器 { position: absolute; 
}

绝对定位的特点：（务必记住）

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置。（脱标）所以绝对定位是脱离标准流的。
口诀：子绝父相

例如：
效果：
给红色盒子添加绝对定位之前
在这里插入图片描述
给红色盒子添加绝对定位之后

绝对定位不再占有原先的位置。（脱标）所以绝对定位是脱离标准流的
代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS定位之决对定位</title><style>/*绝对定位absolute（不占有原来的位置）*/.box {position: relative;/*top: 200px;*//*left: 200px;*/width: 400px;height: 400px;background-color: green;margin: 100px auto;}.box1 {width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;background-color: red;}.box2 {width: 200px;height: 200px;background-color: blue;}</style>
</head>
<body>
<div class="box"><div class="box1"></div><div class="box2"></div>
</div>
</body>
</html>

6. 使用上面所学，完成下面小案例
效果：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>子绝父相小案例</title><style>.box{width: 250px;margin: 100px auto;padding: 10px;text-align: center;border: 1px solid gray;position: relative;}.box>em {position: absolute;top: 0;right: 0;}.box>img {margin: 20px auto;}.box h3 {margin: 5px auto;width: 214px;height: 21px;font-weight: 400;font-size: 14px;}.box p {margin: 5px auto;width: 214px;height: 18px;font-size: 12px;color: #b0b0b0;}.box span {margin: 5px auto;width: 214px;height: 21px;color: #ff6700;font-size: 13px;}</style>
</head>
<body>
<div class="box"><em><img src="../img/new.png" alt=""></em><img src="../img/no5_box_3__2_1.jpg"><h3>Redmi Note 11 Pro系列</h3><p>Redmi Note 11 Pro系列</p><span>1799元起</span>
</div>
</body>
</html>

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

选择器 { position: fixed; 
}

固定定位的特点：（务必记住）

以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系
不随滚动条滚动。
固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

例如：
效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS定位之固定定位</title><style>body {height: 6000px;}.dj {position: fixed;top: 100px;right: 40px;}</style>
</head>
<body>
<div class="dj"><img src="../img/pvp.png" alt="">
</div>
</body>
</html>

8.固定定位小技巧：固定在版心右侧位置。

小算法：

让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。
让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置
就可以让固定定位的盒子贴着版心右侧对齐了。

例如：
效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>固定到版心右侧</title><style>* {margin: 0;padding: 0;}.div1 {width: 100px;height: 100px;background-color: green;position: fixed;bottom: 0;left: 50%;margin-left: -505px;/* 这部分为右侧*//*position: fixed;*//*right: 250px;*//*left: 50%;*//*bottom: 0px;*/}.div2 {width: 800px;height: 8000px;margin: 0 auto;background-color: red;}</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

9. 粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的
语法：

选择器 { position: sticky; top: 10px;}

粘性定位的特点：

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

例如：
当页面滚动到某处，固定不动了

效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>粘性定位</title><style>body {height: 3000px;}.box {width: 50px;height: 200px;background-color: red;margin-left: 95%;margin-top: 200px;position: sticky;top: 50px;}</style>
</head>
<body>
<div class="box">粘性定位</div>
</body>
</html>

10 定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)
语法：

选择器 {z-index: 1; }

数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性

例如：
三个盒子利用定位堆叠到了一起，展示第二个盒子
效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定位的堆叠顺序</title><style>.box {width: 200px;height: 200px;position: absolute;top: 0;left: 100px;}.div1 {z-index: 1;background-color: red;}.div2 {z-index: 2;background-color: green;}.div3 {background-color: blue;}</style>
</head>
<body>
<div class="div1 box">1</div>
<div class="div2 box">2</div>
<div class="div3 box">3</div>
</body>
</html>

11 绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
② margin-left: -100px;：让盒子向左移动自身宽度的一半。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位水平垂直居中</title><style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;background-color: red;position: absolute;margin:0 auto;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

12 定位特殊特性
绝对定位和固定定位也和浮动类似。

行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

13 脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

14 绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
但是绝对定位（固定定位）会压住下面标准流所有的内容。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

15 定位案例
效果：
在这里插入图片描述

分析：
布局分析：首先有一个大盒子，里面放上一个图片，然后在放左右箭头，最后在放一个ul无序列表
样式：首先大盒子添加相对定位，然后左右两个箭头的小盒子添加绝对定位，在利用垂直居中的小算法，定位到中间即可，其他的样式修改这里就不在一一赘述

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>淘宝轮播图结构</title><style>* {margin: 0;padding: 0;}.tb-promo {position: relative;width: 520px;height: 280px;margin: 100px auto;}.prev {width: 20px;height: 30px;position: absolute;top: 50%;margin-top: -15px;left: 0;background-color: rgba(0,0,0,.4);color: white;text-align: center;line-height: 30px;border-top-right-radius: 50%;border-bottom-right-radius: 50%;}.next {position: absolute;top: 50%;margin-top: -15px;right: 0;width: 20px;height: 30px;background-color: rgba(0,0,0,.4);color: white;text-align: center;line-height: 30px;border-top-left-radius: 50%;border-bottom-left-radius: 50%;}.promo-nav {position: absolute;bottom: 15px;left: 50%;margin-left: -35px;width: 70px;height: 13px;border-radius: 7px;background-color: rgba(255,255,255,.3);}.promo-nav li {width: 8px;height: 8px;list-style: none;background-color: white;border-radius: 50%;float: left;margin: 3px;}.promo-nav li:hover {background-color: #ff5000;}</style>
</head>
<body>
<div class="tb-promo"><img src="../img/tb.jpg" alt=""><div class="prev"><</div><div class="next">></div><ul class="promo-nav"><li></li><li></li><li></li><li></li><li></li></ul>
</div>
</body>
</html>

16 元素的显示与隐藏

display 显示隐藏
visibility 显示隐藏
overflow 溢出显示隐藏

16.1 display属性
display 属性用于设置一个元素应如何显示。
display: none ；隐藏对象
display：block ；除了转换为块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置。

16.2 visibility 可见性
visibility 属性用于指定一个元素应可见还是隐藏。
visibility：visible ; 元素可视
visibility：hidden; 元素隐藏
visibility 隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来位置，就用 visibility：hidden
如果隐藏元素不想要原来位置，就用 display：none (用处更多重点）

16.3 overflow 溢出
overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值：
visible：不剪切内容也不添加滚动条
hidden：不显示超出对象尺寸的内容，超出的部分隐藏掉
scroll：不管超出内容否，总是显示滚动条
auto：超出自动显示滚动条，不超出不显示滚动条

16.4 总结

display 显示隐藏元素但是不保留位置
visibility 显示隐藏元素但是保留原来的位置
overflow 溢出显示隐藏但是只是对于溢出的部分处理

17 显示隐藏案例
效果：
鼠标不经过：
在这里插入图片描述
鼠标经过

代码：

<html lang="en">
<head><meta charset="UTF-8"><title>土豆案例</title><style>.box {position: relative;width: 448px;height: 252px;margin: 100px auto;}.div1 {width: 448px;height: 252px;background-color: rgba(0,0,0,.4);position: absolute;left: 0;top: 0;display: none;}.div1 img {position: relative;left: 50%;top: 50%;margin-left: -17px;margin-top: -17px;}.box:hover  .div1{display: block;}</style>
</head>
<body>
<div class="box"><img src="../img/tudou.jpg" alt=""><div class="div1"><img src="../img/arr.png" alt=""></div>
</div>
</body>
</html>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

songboyao-java-final/static/接口
final关键字 final关键字的概述 final： 不可改变。可以用于修饰类、方法和变量。类：被修饰的类，不能被继承比如String。方法：被修饰的方法，不能被重写。变量：被修饰的变量，就只能赋值一次,…...
2024/4/13 12:08:55
KY4 代理服务器
描述使用代理服务器能够在一定程度上隐藏客户端信息，从而保护用户在互联网上的隐私。我们知道n个代理服务器的IP地址，现在要用它们去访问m个服务器。这 m 个服务器的 IP 地址和访问顺序也已经给出。系统在同一时刻只能使用一个代理服务器，并…...
2024/5/2 16:21:48
python类中函数相互调用
python代码： class Animal(object):def __init__(self,name):self.namenamedef eat(self,food):print(f{self.name}：正在吃{food})def sleep(self):self.eat(狗粮)print(f{self.name}：正在睡觉)dogAnimal(大黄) dog.sleep() 执行结果&#…...
2024/4/13 12:08:50
服务器配置简单的防盗链，减少不必要的负载，初级的网维知识（更新中…）
简单就是创建个.htaccess文件就可以了，例如 Nginx Apache 的： RewriteEngine on RewriteRule 要保护的文件.zip$ 404（或 /防盗链提示页面.php） 多种类型文件全面设置方法： RewriteEngine on RewriteRule ^(.*\.(jp…...
2024/4/13 12:09:10
CSS部分-CSS盒子模型练习
CSS盒子模型练习案例一： 效果： 代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>产品评价</title><style>* {margin: 0;padding: 0;}body {ba…...
2024/4/15 13:13:47
用HTML5写ZZULI官网（四）
用CSS实现网页布局 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>郑州轻工业大学欢迎您</title> <style> * {box-sizing: border-box; }body {font-family: Arial;padding: 10px;background: #f1f1f1; }…...
2024/4/13 12:09:00
【玩客云】linux（Debian）系统下玩机记录
文章目录一、安装花生壳二、设置显示中文字体1、查看当前语言2、安装字体3、修改字体文件的权限4、建立字体缓存5、添加中文支持6.1、安装locale6.2、配置6、安装中文字库三、报错集合1、联网成功，提示证书不合格2、一、安装花生壳二、设置显示中文字体 1、查看当…...
2024/4/13 12:10:10
逆向生成mapper
genreator.xml <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN""http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd…...
2024/4/13 12:10:10
剑指offer4:二维数组中的查找
分析： 这题，其实是可以暴力解决哒哟好像，但是除了暴力，我们可以用更加巧妙（bushi）的方法来显示自己的逼格，比如题目中给了这个matrix的性质，我们可以从右上角开始遍历，想…...
2024/4/14 5:14:51
C语言—控制小球移动（同贪吃蛇移动原理）
目录 01、实现效果 02、代码 01、实现效果通过控制W/S/A/D方向移动。 02、代码 #include<stdio.h> #include<windows.h>//使用gotoxy（光标移动函数） #include<conio.h>//监听键盘输入 struct Coord {int x;int y; }coord; int …...
2024/4/22 18:20:57
google编码规范之htmlcssguide.html其一
一.背景 This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS, including GSS files. Tools are free…...
2024/4/18 10:24:46
一元二次方程(有实根) (300 分)
输入一元二次方程的三个系数a、b、c的值,输出其两个根(假设方程有实根)。请根据输出样例确定两个根的输出顺序。输入格式: 三个数,空格分隔。输出格式: 按样例格式输出。输入样例: 1 4 3 输出样例： X1-1.000 X2-3.000 输入样例： -1 4 -3 输出样例…...
2024/4/15 14:16:00
P1065 [NOIP2006 提高组] 作业调度方案
洛谷的模拟绿题传送门 ：https://www.luogu.com.cn/problem/P1065 题目中涉及的变量比较多，题目也比较难理解，最好在已经理解题目的意思后再看题解。题解写在代码段的注释里，很清晰。如果实在看不懂也可以上B站找视频。 #incl…...
2024/4/13 12:09:50
【蓝桥杯】有理数的循环节
有理数的循环节 1/70.142857142⋯⋯1/7 0.142857142 \cdots\cdots1/70.142857142⋯⋯ 是个无限循环小数。任何有理数都可以表示为无限循环小数的形式。题目要求即是：给出一个数字的循环小数表示法。输入描述输入一行，两个整数。每个整数范围均为…...
2024/5/2 15:57:03
投资的时间
投资是一个复利效应极其明显的行业，当我们建立起正确的理念，掌握了科学的方法论，进化的速度就会越来越快，是做加速运动，长期优势也就越明显。所以投资其实是可以一直做下去的事业，可以活到老，学…...
2024/4/7 22:00:26
java跨语言优势以及jdk jre两个概念的简单了解
jdk jre 作用？两者关系 jdk是Java的运行环境，包含有jre 通常安装jdk就可以是适合于java开发者的工具 jdk是java标准的开发工具包。它提供了编译、运行Java程序所需的各种工具和资源，包括java编辑器，java运行环境jre 以及常用的J…...
2024/4/13 12:09:50
Codeforces Round #770 (Div. 2)
比赛连接 https://codeforces.com/contest/1634 A. Reverse and Concatenate（思维） 题意 t组输入，每一组输入两行，第一行输入一个n和k分别表示字符串的长度，k表示可操作的次数，我们每次可以有两种操作&…...
2024/4/20 10:25:10
C语言—今天星期几(详细注释）
目录 01、实现效果 02、代码 01、实现效果 02、代码 #include<stdio.h> #include<stdlib.h> char date [7][7]{"星期日","星期一","星期二","星期三","星期四","星期五","星期六"}; //判…...
2024/4/18 4:21:50
Messager Problem（NOIOPJENGLISH20）
Messager Problem https://acs.jxnu.edu.cn/problem/NOIOPJENGLISH20 1000ms 65536K 描述： There are N nodes in the graph. Given the length of edges between the nodes, find the shortest path of size N and the nodes in the path are all different. …...
2024/4/13 12:09:50
梦开始的地方
1.关于我： 我叫杨万震，来自甘肃武威，是一名计算机科学与技术专业的大一学生。这是我的第一篇博客，从开始写第一篇博客开始，我将陆续记录以后学习的点点滴滴，并且想要通过自己的努力来改变自己。 2.学习目…...
2024/4/18 9:53:06

CSS部分-第八节定位

相关文章

最新文章