55 定位

阅读：评论：0

55 定位

一.静态定位

二.相对定位

代码：

<!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>相对定位</title><style>.box1 {position: relative;top: 100px;left: 100px;width: 200px;height: 200px;background-color: pink;}.box2 {width: 200px;height: 200px;background-color: red;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body></html>

结果：

三.绝对定位

1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)。

代码

<!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>绝对定位</title><style>.father {width: 500px;height: 500px;background-color: skyblue;}.son {position: absolute;/* top: 0;left: 0; *//* top: 100px;left: 100px; *//* top: 200px;right: 100px; *//* left: 0px;bottom: 0; */right: 100px;bottom: 100px;width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div class="father"><div class="son"></div></div></body></html>

结果

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>03-绝对定位-父级有定位</title><style>.grandpa {position: relative;width: 600px;height: 600px;background-color: rgb(31, 172, 55);padding: 50px;}.father {width: 400px;height: 400px;background-color: skyblue;}.son {position: absolute;top: 100px;right: 100px;width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div class="grandpa"><div class="father"><div class="son"></div></div></div></body></html>

结果：

3.绝对定位不再占有原先的位置。(脱标)

例子

四.固定定位

代码：

<!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>固定定位</title><style>.dj {position: fixed;top: 10px;left: 10px;}</style>
</head><body><div class="dj"><img src="images/pvp.png" alt=""></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><p>主人，请尽请吩咐吧！</p><p>主人，请尽请吩咐吧！</p><p>主人，请尽请吩咐吧！</p><p>主人，请尽请吩咐吧！</p><p>主人，请尽请吩咐吧！</p><p>主人，请尽请吩咐吧！</p><p>主人，请尽请吩咐吧！</p><p>主人，请尽请吩咐吧！</p><p>主人，请尽请吩咐吧！</p><p>主人，请尽请吩咐吧！</p>
</body></html>

结果：

代码：

<!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>.w {width: 800px;height: 1200px;background-color: skyblue;/* 让盒子居中 */margin: 0 auto;}.fixed {position: fixed;/* 1. 走浏览器宽度的一半 */left: 50%;/* 2. 利用margin 走版心盒子宽度的一半距离 */margin-left: 405px;width: 60px;height: 80px;background-color: pink;}</style></head><body><div class="fixed"></div><div class="w">版心盒子</div>
</body></html>

结果：

五.粘性定位

代码：

<!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>粘性定位</title><style>body {height: 3000px;}.nav {/* 粘性定位 */position: sticky;top: 10px;width: 600px;height: 50px;background-color: pink;margin: 100px auto;}</style>
</head><body><div class="nav">我是导航栏</div>
</body></html>

结果

代码

<!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>07-定位的叠放顺序</title><style>.box {position: absolute;top: 0;left: 0;width: 200px;height: 200px;}.xiongda {background-color: red;z-index: 1;}.xionger {top: 50px;left: 50px;background-color: skyblue;z-index: 2;}.qianggege {top: 100px;left: 100px;background-color: pink;}</style>
</head><body><div class="box xiongda ">熊大</div><div class="box xionger ">熊二</div><div class="box qianggege ">光头强</div></body></html>

结果

代码：

<!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>08-绝对定位的盒子水平垂直居中</title><style>.box {position: absolute;/* (1)水平居中 *//* 1. left 走 50%  父容器宽度的一半 */left: 50%;/* 2. margin 负值 往左边走 自己盒子宽度的一半 */margin-left: -100px;/* (2)垂直居中 *//* 1. top 走 50%  父容器高度的一半 */top: 50%;/* 2. margin 负值 往上边走 自己盒子高度的一半 */margin-top: -100px;width: 200px;height: 200px;background-color: pink;/* margin: auto; */}</style>
</head><body><div class="box"></div>
</body></html>

结果：

代码：

<!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>09-定位的特殊属性</title><style>/* 绝对定位和固定定位也和浮动类似。 *//* 1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度。 */.one {float: right;width: 200px;height: 200px;background-color: rgb(211, 50, 50)}.two {position: absolute;/* position: fixed; */top: 400px;width: 300px;height: 300px;background-color: rgb(73, 30, 172);}/* 2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。 */div {/* float: left; */position: fixed;background-color: rgb(30, 207, 23);}</style></head><body><span class="one">123</span><span class="two">wwww</span><div>abcd</div><!-- /* <span class="box1">把行内元素转化为块级元素</span><span class="box2">行内元素添加绝对或者固定定位,可以直接设置高度和宽度</span> */ --></body></html>

结果

一.浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)

但是绝对定位(固定定位)会压住下面标准流所有的内容。

代码

<!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>定位会完全压住标准流盒子内容</title><style>.box {/* 1.浮动的元素不会压住下面标准流的文字 *//* float: left; *//* 2. 绝对定位（固定定位） 会压住下面标准流所有的内容。 *//* position: fixed; */position: absolute;width: 300px;height: 300px;background-color: pink;}</style>
</head><body><div class="box"></div><p>阁下何不同风起，扶摇直上九万里;阁下何不同风起，扶摇直上九万里;</p>
</body></html>

结果

二.浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。

代码

<!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>浮动的产生的原来目的是文字环绕</title><style>p {text-indent: 2em;}img {float: left;}</style>
</head><body><p>“今年的梅花开得晚了”，我看着天上一闪而过的飞机默默地叹了口气。口中飘出的热气，似乎也在跟着飞机，不见了。“你还在想他？”李维伦回过头看着我。我不说话，等待着他的下一句。“你还不想放弃吗？你到底想等他多久？”他皱了皱眉头。我看着地上，发出了哽咽的声音：“我不知道。”<br>他听了我这句话，没再说什么。于是，我们就这样僵持着。<br><img src="images/pvp.png" alt="">不一会儿，风吹起来了，我开始颤抖起来。我抬头看了李维伦一眼，他正在面无表情的盯着我。看着他的表情，我感到恐惧。“我先回去了。”我感觉我的声音也颤抖起来。<br>他眨了一下眼睛，又叹了一口气，“回去吧，天冷了，多添一件衣服。”他转过身，走了。看着他的背影，忽然觉得，他很落寞。<br>我回到家，看着窗外还没有开的梅花，泪立刻占领了我的眼眶。因为今天是圣诞节，而今年的圣诞节没有下雪。<br>两年前的一天，我正在家里写作业。忽然，我闻到了一阵梅花香。我抬起头，看见哥哥正在窗外忙着什么。我打开窗，冷风立刻吹了进来。<br>“今年的梅花开得晚了”，我看着天上一闪而过的飞机默默地叹了口气。口中飘出的热气，似乎也在跟着飞机，不见了。“你还在想他？”李维伦回过头看着我。我不说话，等待着他的下一句。“你还不想放弃吗？你到底想等他多久？”他皱了皱眉头。我看着地上，发出了哽咽的声音：“我不知道。”<br>他听了我这句话，没再说什么。于是，我们就这样僵持着。<br>不一会儿，风吹起来了，我开始颤抖起来。我抬头看了李维伦一眼，他正在面无表情的盯着我。看着他的表情，我感到恐惧。“我先回去了。”我感觉我的声音也颤抖起来。<br>他眨了一下眼睛，又叹了一口气，“回去吧，天冷了，多添一件衣服。”他转过身，走了。看着他的背影，忽然觉得，他很落寞。<br>我回到家，看着窗外还没有开的梅花，泪立刻占领了我的眼眶。因为今天是圣诞节，而今年的圣诞节没有下雪。<br>两年前的一天，我正在家里写作业。忽然，我闻到了一阵梅花香。我抬起头，看见哥哥正在窗外忙着什么。我打开窗，冷风立刻吹了进来。<br>“今年的梅花开得晚了”，我看着天上一闪而过的飞机默默地叹了口气。口中飘出的热气，似乎也在跟着飞机，不见了。“你还在想他？”李维伦回过头看着我。我不说话，等待着他的下一句。“你还不想放弃吗？你到底想等他多久？”他皱了皱眉头。我看着地上，发出了哽咽的声音：“我不知道。”<br>他听了我这句话，没再说什么。于是，我们就这样僵持着。<br>不一会儿，风吹起来了，我开始颤抖起来。我抬头看了李维伦一眼，他正在面无表情的盯着我。看着他的表情，我感到恐惧。“我先回去了。”我感觉我的声音也颤抖起来。<br>他眨了一下眼睛，又叹了一口气，“回去吧，天冷了，多添一件衣服。”他转过身，走了。看着他的背影，忽然觉得，他很落寞。<br>我回到家，看着窗外还没有开的梅花，泪立刻占领了我的眼眶。因为今天是圣诞节，而今年的圣诞节没有下雪。<br>两年前的一天，我正在家里写作业。忽然，我闻到了一阵梅花香。我抬起头，看见哥哥正在窗外忙着什么。我打开窗，冷风立刻吹了进来。<br></p>
</body></html>

结果

本文发布于:2024-02-03 07:33:34，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170691681449563.html

上一篇：定位是什么，元素怎么显示隐藏

下一篇：echarts柱形图每个柱子设置不同的渐变色

标签：

留言与评论（共有 0 条评论）