11-CSS定位
01 CSS定位概念理解
01 标准流布局概念的理解
02 position属性
02 相对定位
依然在标准流中
应用场景: 在不影响其它元素的情况下,对当前元素进行微调
<!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>
.text {
/* 相对定位: 相对元素自己原来的位置 */
position: relative;
left: 30px;
top: 50px;
}
</style>
</head>
<body>
<span>span元素</span>
<strong class="text">strong元素</strong>
<img src="../images/gouwujie01.jpg" alt="">
<div>div元素</div>
</body>
</html>
2.1 案例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
position: relative;
font-size: 10px;
top: -8px;
}
</style>
</head>
<body>
<div>
3<span>2</span> + 2<span>3</span> = 17
</div>
</body>
</html>
2.2 案例2
梦幻西游使用背景的方法让图片的重要内容始终居中
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.box {
height: 489px;
overflow: hidden;
}
.box img {
position: relative;
/* 先把图片移到最左边 */
left: -960px;
/* 再把图片移动包含块的一半{marigin-left的百分比是相对于包含块的} */
margin-left: 50%;
}
</style>
</head>
<body>
<div class="box">
<img src="./imgs/mhxy.jpg" alt="">
</div>
</body>
</html>
但是这种方案图片向左移的距离写死了,如果图片的宽度发生了变化，还需要我们去手动修改这是不方便的
修改代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.box {
height: 489px;
overflow: hidden;
}
.box img {
position: relative;
/* 先移动图片的一半（translate是相对于自己）*/
transform: translate(-50%);
/* 再把图片移动包含块的一半{marigin-left的百分比是相对于包含块的} */
margin-left: 50%;
}
</style>
</head>
<body>
<div class="box">
<img src="./imgs/mhxy.jpg" alt="">
</div>
</body>
</html>
03 固定定位
脱离标准流(相对于视口即可见区域)
使用固定定位前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span>span元素</span>
<img src="./imgs/gouwujie01.jpg" alt="">
<strong>strong元素</strong>
</body>
</html>
使用固定定位后(相当于把原来的元素拿走了,自己再决定放在哪里[用left/right/top/bottom等属性来决定])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
strong {
position: fixed;
}
</style>
</head>
<body>
<span>span元素</span>
<img src="./imgs/gouwujie01.jpg" alt="">
<strong>strong元素</strong>
</body>
</html>
3.1 案例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.handle {
position: fixed;
right: 30px;
bottom: 30px;
}
.handle .item {
text-align: center;
width: 80px;
height: 40px;
color: #fff;
line-height: 40px;
background-color: brown;
border-radius: 8px;
cursor: pointer;
}
.handle .item:hover {
background-color: red;
}
.handle .top {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="handle">
<div class="item top">顶部</div>
<div class="item bottom">底部</div>
</div>
</body>
</html>
04 绝对定位
脱离标准流(参考的是最临近的定位祖先元素如果没有找到这样的祖先元素,参考的是视口)
4.1 基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box .item1 {
position: relative;
width: 400px;
height: 400px;
background-color: green;
}
.box .item1 > .item2 {
position: absolute;
right: 0;
bottom: 0;
width: 200px;
height: 200px;
background-color: red;
}
.box .item1 > .item2 strong {
position: absolute;
left: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="item1">
<div class="item2">
<strong>strong元素</strong>
</div>
</div>
</div>
</body>
</html>
05 position为absolute或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>
.box {
background-color: red;
}
/* 可以看到box这个元素直接在页面消失了，所以当设置元素为absolute它就不会向父元素汇报自己的宽度和高度了 */
.box .container {
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<div class="container">div元素</div>
</div>
</body>
</html>
06 绝对定位让元素水平居中
<!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 {
position: relative;
width: 800px;
height: 300px;
background-color: red;
}
.container {
position: absolute;
width: 200px;
height: 100px;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: green;
}
</style>
</head>
<body>
<!-- 水平方向的公式: red box的宽度=绿色盒子的宽度+left+right+margin left + margin right -->
<div class="box">
<div class="container"></div>
</div>
</body>
</html>
07 绝对定位让元素垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
position: relative;
width: 800px;
height: 300px;
background-color: green;
}
.box {
position: absolute;
width: 200px;
height: 100px;
background-color: red;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
08 粘性定位
代码示例
09 z-index
11-CSS定位的更多相关文章
- 简单CSS定位瀑布流实现方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
- CSS 定位 (Positioning) 实例
CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你 ...
- xpath定位和css定位对比
xpath定位和css定位对比 实际项目中使用较多的是xpath定位和css定位.XPath是XML文档中查找结点的语法,换句话就是通过元素的路径来查找这个元素.xpath比较强大,而css选择器 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- html5--6-33 CSS定位是什么
html5--6-33 CSS定位是什么 一.总结 一句话总结: 1.常规文档流是一套体系,浮动是另外一套体系. 2.标签清除浮动之后会跑到常规文档流它本来的地方. 3.浮动是否占据常规文档流:应该不 ...
- css定位
文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...
- 常用的CSS定位，XPath定位和JPath定位
CSS定位 举例 描述 div#menu id为menu的div元素 div.action-btn.ok-btn class为action-btn和ok-btn的div元素 table#emailLi ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- CSS 定位
一.CSS 定位和浮动 它们代替了多年来的表格布局. 定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置. 浮动在 CSS1 中被首次提出.浮动不完全是定位, ...
随机推荐
- Java equals(),== 和 hashcode()
首先来看看equals() 和 "==" 的关系 1.在Java中==是用来比较两个对象的内存地址是否相同的,如果是基本类型的话将会比较其值. 2.equals()我们如果使用的是 ...
- Ubuntu VNC 远程桌面及常见问题
一.Ubuntu 远程桌面开启 在ubuntu 设置中打开远程桌面 **注意:如果没有共享桌面选项也不要谎,只需要安装 vino 即可 sudo apt update sudo apt install ...
- netcore依赖注入通过反射简化
aspnetcore里面用到许多的service,好多业务代码都要通过Service.AddScoped.Singleton.Transient等注入进去,类太多了写起来和管理起来都很麻烦,所以借鉴了 ...
- C语言程序设计-笔记8-结构
C语言程序设计-笔记8-结构 例9-1 输出平均分最高的学生信息.根据学生的基本信息包括学号.姓名.三门课程成绩以及个人平均成绩.输入n个学生的成绩信息,计算并输出平均分最高的学生信息. #incl ...
- .NET CORE 完美支持AOT 的 ORM SqlSugar 教程
1.AOT适合产场 Aot适合工具类型的项目使用,优点禁止反编 ,第一次启动快,业务型项目或者反射多的项目不适合用AOT AOT更新记录: 实实在在经过实践的AOT ORM 5.1.4.117 +支持 ...
- 【深度学习】基础--NumPy
因为深度学习会应用到我们大学时候学习的数学知识---线性代数.(矩阵当年想起来还是挺有意思的,有考研的经历都有感觉) 而在计算机里面如何展示矩阵的计算和应用,就需要运用到NumPy,是Python的一 ...
- MacOS安装和使用标注软件“labelImg”教程
原文发布于:https://blog.zhaoxuan.site/archives/16.html: 第一时间获取最新文章请关注博客个人站:https://blog.zhaoxuan.site. 简介 ...
- Linux中的find
find命令在硬盘上进行文件的查找,比起whereis与locate会比较耗时. 与时间有关的选项 在Linux当中一个文件有mtime,ctime,atime,find在搜索时可以配置这3种时间. ...
- Docker服务搭建个人音乐播放器Koel（及马里奥游戏）
Koel简介 Koel是一种简单的基于Web的个人音频流服务,用客户端的Vue和服务器端的Laravel编写.针对Web开发人员,Koel采用了一些更现代的Web技术来完成其工作 搭建步骤 docke ...
- 当你用neovim的mason插件管理lsp config，并且配置好bash的bashls后，却没有正常工作的解决方式
刚开始遇到这个情况我百思不得其解,检查了neovim checkhealth,以为是npm包管理的问题,然后删了下删了下 不但没有解决还把包管理整乱了-- 后来发现是我没仔细看bash-languag ...