CSS学习笔记05

CSS笔记05

定位

position

  • CSS 属性position - 用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。position 有以下常用的属性值：
    • position: static; - 默认值。指定元素使用正常的布局行为，即元素在标准文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
    • position: relative; - 相对定位，元素先放置在默认的static位置，再在不改变页面布局的前提下调整元素位置。相对定位的元素不会被移出标准文档流，且元素原先在标准文档流中所占的空间会被保留。
    • position: absolute; - 绝对定位，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置，如果元素没有非static定位的祖先元素，绝对定位元素会相对于初始块容器的位置进行偏移。（初始块容器是一个有着和浏览器视口一样的尺寸的矩形，它包含根元素<html>。）元素绝对定位后会重新生成一个块级框，而不论原来它在正常文档流中生成何种类型的框。绝对定位的元素会被移出标准文档流，且元素原先在标准文档流中所占的空间不会被保留。
    • position: fixed; - 固定定位，通过指定元素相对于浏览器视口（viewport）本身的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。 元素固定定位后也会重新生成一个块级框，而不论原来它在正常文档流中生成何种类型的框。固定定位的元素也会被移出标准文档流，且元素原先在标准文档流中所占的空间不会被保留。
  • 补充 - 视口（viewport）：在电脑图形学里面，视口代表了一个可看见的多边形区域（通常来说是矩形）。在浏览器范畴里，它代表的是浏览器中网站可见内容的部分。视口外的内容在被滚动进来前都是不可见的。
  • 下面我们就来详细演示一下这几种定位方式：

静态定位（默认定位） - static

  • position: static; - 默认值。指定元素使用正常的布局行为，即元素在标准文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

  • 首先我们设计一个页面，它由一个父级div和三个子级div组成，我们不手动设置position属性（即此时的position属性为其默认值position: static;）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>默认位置</title><style>body {padding: 20px;}div {margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father {border: 2px solid black;}#first {background-color: yellow;border: 2px dashed orange;}#second {background-color: deepskyblue;border: 2px dashed blue;}#third {background-color: lawngreen;border: 2px dashed green;}</style></head>
<body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div></body>
</html>
  • 我们查看默认情况下的网页效果：

在这里插入图片描述

相对定位 - relative

  • position: relative; - 相对定位，元素先放置在默认的static位置，再在不改变页面布局的前提下调整元素位置。相对定位的元素不会脱离标准文档流，且元素原先在标准文档流中所占的空间会被保留。因此，left: 20px; 会向元素的左外边距边界与其包含块左边界之间添加 20 像素的偏移量，其显示效果便是元素相比于默认位置向右移了 20 像素（在左侧留下了 20 像素的空白）。

  • 我们使用position: relative;将上面默认定位网页中的第一个和第三个div设置为相对定位，并使用top，right，bottom 和 left 属性来改变它们的位置：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位</title><style>body {padding: 20px;}div {margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father {border: 2px solid black;}#first {background-color: yellow;border: 2px dashed orange;position: relative; /* 设置定位方式为相对定位 */left: 20px;top: -20px;}#second {background-color: deepskyblue;border: 2px dashed blue;}#third {background-color: lawngreen;border: 2px dashed green;position: relative; /* 设置定位方式为相对定位 */right: 20px;bottom: -20px;}</style></head>
<body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div></body>
</html>
  • 查看使用相对定位改变元素位置后的网页效果：

在这里插入图片描述

  • 练习：
    • 使用div和超链接a布局页面
    • 每个超链接宽度和高度都为100px，背景颜色为粉色，当鼠标指针移上去时变为蓝色
    • 使用相对定位改变各个超链接的位置

在这里插入图片描述

  • 代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box {width: 300px;height: 300px;border: 2px solid red;margin: 0 auto;padding: 10px;}a {width: 100px;height: 100px;display: block;background-color: pink;line-height: 100px;font-size: 15px;color: white;text-align: center;text-decoration: none;}a:hover {background-color: blue;}#second, #fourth {position: relative;left: 200px;top: -100px;}#fifth {position: relative;left: 100px;top: -300px;}</style></head>
<body><div id="box"><a id="first" href="#">链接1</a><a id="second" href="#">链接2</a><a id="third" href="#">链接3</a><a id="fourth" href="#">链接4</a><a id="fifth" href="#">链接5</a>
</div></body>
</html>
  • 查看网页效果：

在这里插入图片描述

绝对定位 - absolute

  • position: absolute; - 绝对定位，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置，如果元素没有非static定位的祖先元素，绝对定位元素会相对于初始块容器的位置进行偏移。（初始块容器是一个有着和浏览器视口一样的尺寸的矩形，它包含根元素<html>。）元素绝对定位后会重新生成一个块级框，而不论原来它在正常文档流中生成何种类型的框。绝对定位的元素会被移出标准文档流，且元素原先在标准文档流中所占的空间不会被保留。
  • 首先我们来测试一下在没有设置非static定位的祖先元素时，使用绝对定位改变元素第二个子div的位置：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位</title><style>body {padding: 20px;}div {margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father {border: 2px solid black;}#first {background-color: yellow;border: 2px dashed orange;}#second {background-color: deepskyblue;border: 2px dashed blue;position: absolute;left: 10px;top: 20px;}#third {background-color: lawngreen;border: 2px dashed green;}</style></head>
<body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div></body>
</html>
  • 查看使用相对定位改变元素位置后的网页效果：

在这里插入图片描述

  • 分析：

在这里插入图片描述

  • 接着我们再来测试一下在设置了非static定位的祖先元素后，使用绝对定位改变元素第二个子div的位置：
  • 将第二个子div的父级元素father设置为相对定位 -relative（通常我们都习惯将使用绝对定位的元素的父级元素设置为相对定位 - “ 子绝父相 ” ）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位</title><style>body {padding: 20px;}div {margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}/* 设置父级元素为非static定位 */#father {border: 2px solid black;position: relative;}#first {background-color: yellow;border: 2px dashed orange;}#second {background-color: deepskyblue;border: 2px dashed blue;position: absolute;left: 10px;top: 20px;}#third {background-color: lawngreen;border: 2px dashed green;}</style></head>
<body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div></body>
</html>
  • 查看使用绝对定位改变元素位置后的网页效果：

在这里插入图片描述

  • 分析：

在这里插入图片描述

固定定位 - fixed

  • position: fixed; - 固定定位，通过指定元素相对于浏览器视口（viewport）本身的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。 元素固定定位后也会重新生成一个块级框，而不论原来它在正常文档流中生成何种类型的框。固定定位的元素也会被移出标准文档流，且元素原先在标准文档流中所占的空间不会被保留。

  • 下面我们重新写一个例子：在网页中定义两个div，第一个div使用绝对定位移动到初始块容器的右下角，第二个div使用固定定位移动到浏览器视口的右下角：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>固定定位</title><style>body {height: 1000px;}/* 绝对定位，相对于初始包含块(和浏览器视口大小相等的一个矩形) */div:nth-of-type(1) {width: 200px;height: 200px;background-color: red;position: absolute;right: 0;bottom: 0;}/* 固定定位，相对于浏览器视口本身 */div:nth-of-type(2) {width: 100px;height: 100px;background-color: blue;position: fixed;right: 0;bottom: 0;}</style></head>
<body><div>绝对定位div</div>
<div>固定定位div</div></body>
</html>
  • 查看网页效果：

在这里插入图片描述

  • 可以看到此时两个div都移动到了右下角。那么它们的区别在哪里呢？
  • 下面我们滑动浏览器侧边的滚动条：

在这里插入图片描述

  • 我们可以发现使用绝对定位的div的位置会随着屏幕滚动而变化；而使用固定定位的div的位置则不会随着屏幕滚动而变化，始终在当前浏览器视口的右下角。

z-index 与 不透明度

  • 首先我们来理解一下什么是图层：

在这里插入图片描述

  • CSS 属性z-index指定一个元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上层。
  • 演示：
  • 首先我们写一个 HTML 页面：

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css">
</head>
<body><div class="content"><ul><li><img src="images/bg.png" alt="bg.png"></li><li class="tipText">快来领养猫咪吧</li><li class="tipBg"></li><li>XX宠物救助中心</li></ul>
</div></body>
</html>
  • 它的页面效果是这样的：

在这里插入图片描述

  • 我们给它添加一些样式：

style.css

#content {width: 460px;margin: 0;padding: 0;overflow-block: hidden;font-size: 12px;line-height: 25px;border: 1px solid black;
}ul, li {margin: 0;padding: 0;list-style: none;
}/* 设置父级元素相对定位(子绝父相) */
#content {position: relative;
}/* 绝对定位 */
.tipText, .tipBg {width: 460px;height: 25px;position: absolute;top: 285px;
}.tipText {color: white;
}.tipBg {background-color: black;
}
  • 此时的页面效果如下：

在这里插入图片描述

  • 我们发现我们的提示背景tipBg覆盖住了我们的提示文字tipText，导致我们看不到我们的提示文字。
  • 我们现在给提示文字tipText设置堆叠顺序，让它的堆叠顺序更高：

style.css

#content {width: 460px;margin: 0;padding: 0;overflow-block: hidden;font-size: 12px;line-height: 25px;border: 1px solid black;
}ul, li {margin: 0;padding: 0;list-style: none;
}#content {position: relative;
}.tipText, .tipBg {width: 460px;height: 25px;position: absolute;top: 285px;
}/* z-index - 设置元素的堆叠顺序 */
.tipText {color: white;z-index: 99;
}.tipBg {background-color: black;
}
  • 此时的页面效果如下：

在这里插入图片描述

  • 补充：为了让页面更美观，我们还可以使用opacity属性设置元素的不透明度：
#content {width: 460px;margin: 0;padding: 0;overflow-block: hidden;font-size: 12px;line-height: 25px;border: 1px solid black;
}ul, li {margin: 0;padding: 0;list-style: none;
}#content {position: relative;
}.tipText, .tipBg {width: 460px;height: 25px;position: absolute;top: 285px;
}.tipText {color: white;z-index: 99;
}/* opacity - 设置元素的不透明度(0.0 ~ 1.0) */
.tipBg {background-color: black;opacity: 0.5;/* filter: alpha(opacity=50); - IE8以及更早版本支持使用filter设置元素的不透明度 */
}
  • 此时的页面效果如下：

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Docker】01-Centos安装、简单使用

【Docker】01-Centos安装、简单使用

参考教程&#xff1a; https://www.bilibili.com/video/BV1Qa4y1t7YH/?p5&spm_id_frompageDriver&vd_source4964ba5015a16eb57d0ac13401b0fe77 什么是Docker&#xff1f; Docker是一种开源的容器化平台&#xff0c;用于构建、打包、部署和运行应用程序。它通过使用容…
阅读更多...
Ctfshow nodejs

Ctfshow nodejs

Ctfshow nodejs web334(特性)web335(特性)web336(特性)web337(特性)web338(原型链污染)web339(原型链污染)web340(原型链污染)web 341(ejs)web342(jade)web343(jade)web344(特性) web334(特性) login.js var express require(express);var router express.Router();var use…
阅读更多...
C# 如何将使用的Dll嵌入到.exe应用程序中？

C# 如何将使用的Dll嵌入到.exe应用程序中？

文章目录 前言详细实操简要步骤 前言 有没有想自己开发的exe保留一点神秘&#xff0c;不想让他人知道软件使用了哪些dll; 又或许是客户觉得一个软件里面的dll文件太多了&#xff0c;能不能简单一点&#xff0c;直接双击.exe就可以直接运行了&#xff0c;别搞那么多乱七八糟的。…
阅读更多...
微信小程序 选择学期控件 自定义datePicker组件 不复杂

微信小程序 选择学期控件 自定义datePicker组件 不复杂

我的时间选择组件在common文件夹里 datePicker组件代码 html: <view class"date_bg_view"> </view> <view class"date_content"><view class"date_title"><image src"/image/icon_close_black.png" clas…
阅读更多...
前端生成图片验证码怎么做？

前端生成图片验证码怎么做？

##题记&#xff1a;我们实现一个功能首先想一下我们需要做哪些工作&#xff0c;比如我们需要生成一个随机的图片验证码&#xff0c;我们需要一个就是点击事件获取验证码&#xff0c;通过接口我们去获取图片路径进行渲染就行&#xff0c;这里边还要牵扯一件事情就是获取一个随机…
阅读更多...
构建现代应用：Java中的热门架构概览

构建现代应用：Java中的热门架构概览

文章目录 1. 三层架构2. Spring框架3. 微服务架构4. Java EE&#xff08;Enterprise Edition&#xff09;5. 响应式架构6. 大数据架构7. 领域驱动设计&#xff08;Domain-Driven Design&#xff0c;DDD&#xff09;8. 安卓开发架构结论 &#x1f389;欢迎来到Java学习路线专栏~…
阅读更多...
在Windows10上编译grpc工程,得到protoc.exe和grpc_cpp_plugin.exe

在Windows10上编译grpc工程,得到protoc.exe和grpc_cpp_plugin.exe

grpc是google于2015年发布的一款跨进程、跨语言、开源的RPC(远程过程调用)技术。使用C/S模式&#xff0c;在客户端、服务端共享一个protobuf二进制数据。在点对点通信、微服务、跨语言通信等领域应用很广&#xff0c;下面介绍grpc在windows10上编译&#xff0c;这里以编译grpc …
阅读更多...
es5的实例__proto__(原型链) prototype(原型对象) {constructor:构造函数}

es5的实例__proto__(原型链) prototype(原型对象) {constructor:构造函数}

现在看这张图开始变得云里雾里&#xff0c;所以简单回顾一下 prototype 的基本内容&#xff0c;能够基本读懂这张图的脉络。 先介绍一个基本概念&#xff1a; function Person() {}Person.prototype.name KK;let person1 new Person();在上面的例子中&#xff0c; Person …
阅读更多...
开发指导—利用CSS动画实现HarmonyOS动效（一）

开发指导—利用CSS动画实现HarmonyOS动效（一）

注&#xff1a;本文内容分享转载自 HarmonyOS Developer 官网文档 一. CSS 语法参考 CSS 是描述 HML 页面结构的样式语言。所有组件均存在系统默认样式&#xff0c;也可在页面 CSS 样式文件中对组件、页面自定义不同的样式。请参考通用样式了解兼容 JS 的类 Web 开发范式支持的…
阅读更多...
YOLOv5模型压缩：综述

YOLOv5模型压缩：综述

YOLOv5模型压缩：综述 AbstractIntroduction剪枝基于ln-范数修剪模型Feature map activationBatch normalization scaling factor (BNSF)First-order derivativeMutual informationGranularity of Pruning非结构化剪枝结构化剪枝基于通道的修剪基于滤波器的修剪基于核的剪枝关于…
阅读更多...
在访问一个网页时弹出的浏览器窗口,如何用selenium 网页自动化解决？

在访问一个网页时弹出的浏览器窗口,如何用selenium 网页自动化解决？

相信大家在使用selenium做网页自动化时&#xff0c;会遇到如下这样的一个场景&#xff1a; 在你使用get访问某一个网址时&#xff0c;会在页面中弹出如上图所示的弹出框。 首先想到是利用Alert类来处理它。 然而&#xff0c;很不幸&#xff0c;Alert类处理的结果就是没有结果…
阅读更多...
2021年12月 C/C++（六级）真题解析#中国电子学会#全国青少年软件编程等级考试

2021年12月 C/C++（六级）真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程（1~8级）全部真题・点这里 第1题：电话号码 给你一些电话号码，请判断它们是否是一致的，即是否有某个电话是另一个电话的前缀。比如： Emergency 911 Alice 97 625 999 Bob 91 12 54 26 在这个例子中，我们不可能拨通Bob的电话，因为Emergency的电话是它的前缀，当拨…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023