相对定位和绝对定位的搭配使用
相对定位:relative; 绝对定位:absollute; 固定定位:fixed;
先定位两个块
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.par{margin: auto;width: 300px;height: 300px;background: salmon;}.child{margin: auto;width: 150px;height: 150px;background: slateblue;}</style>
</head>
<body>
<div class="par"><div class="child"></div>
</div>
</body>
</html>
如果想调整小框或大框的位置,我们可以利用相对定位position:relative和绝对定位pozation: absolute,
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.par{position: relative;margin: auto;width: 300px;height: 300px;background: salmon;}.child{position: absolute;bottom: 0;left: 0;margin: auto;width: 150px;height: 150px;background: slateblue;}</style>
</head>
<body>
<div class="par"><div class="child"></div>
</div>
</body>
</html>
我这里给的是小框相对于大框bottom:0; left:0;这里根据你对框位置的需要来写属性有:top bottom left right z-index(z-index是是对框上下位置的调整,也就是z轴的坐标位置)
top是相对于相对位置的距离上边的距离,其他的几个属性类同。
另外,还有一个固定定位的使用pozation:fixd;
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.par{position: relative;margin: auto;width: 300px;height: 300px;background: salmon;}.child{position: absolute;bottom: 0;left: 0;margin: auto;width: 150px;height: 150px;background: slateblue;}.fix{position: fixed;right: 0;top: 30px;width: 30px;height: 500px;background: seagreen;}</style>
</head>
<body>
<div class="par"><div class="child"></div><div class="fix"></div>
</div>
</body>
</html>
固定定位在浏览器中是不随滚动条动的,也就是说它的位置是固定不变的。
相对定位和绝对定位的搭配使用相关推荐
- CSS相对定位和绝对定位详解
CSS相对定位和绝对定位详解 如果,说浮动, 关键在一个 "浮" 字上面, 那么 我们的定位,关键在于一个 "位" 上. PS: 定位是我们CSS算是数一数二难 ...
- WEB学习 -相对定位、绝对定位、固定定位、z-index
相对定位 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. 2.不脱标,老家留坑,形影分离也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘.3.相对定位用途 ...
- [css] 说说你对相对定位、绝对定位、固定定位的理解
[css] 说说你对相对定位.绝对定位.固定定位的理解 position 属性指定了元素的定位类型.position 属性的五个值:static(默认值) relative(相对定位) fixed(固 ...
- 详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位 一.Static 静态定位 通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,这个时候你给这个元素设置的left,r ...
- css中相对定位和绝对定位
css中相对定位和绝对定位 定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现 ...
- html相对定位 不占位置,CSS position 相对定位和绝对定位
一.position 的四个值:static.relative.absolute.fixed. 绝对定位:absolute 和 fixed 统称为绝对定位 相对定位:relative 默认值:stat ...
- 一、CSS定位布局[相对定位、绝对定位、固定定位]
一.CSS定位布局 选项 说明 static 默认形为,属于文档流 relative 相对定位 absolute 绝对定位 fixed 固定定位 1.relative 解释:元素在原来的位置开始移动( ...
- html css x y相对定位坐标,【HTML+CSS】浅谈:相对定位与绝对定位
相对定位和绝对定位 ·定位标签:position ·包括属性:relative(相对) absolute(绝对) 1.position:relative; 假设对一个元素进行相对定位.首先它将出如今它 ...
- HTML:相对定位和绝对定位
相信大家一直对前端中的相对定位和绝对定位有些模糊的概论,现在鼠光给大家讲解一下 绝对定位:position:obsolute <p style="position:obsolute&q ...
最新文章
- .NET简谈组件程序设计之(AppDomain应用程序域)
- [Android] ubuntu 下不识别 Android 设备
- 40.公约数和公倍数
- c# 睡眠3秒_C#中的闭包和意想不到的坑
- 315. Count of Smaller Numbers After Self
- oracle10数据库链接失败,Oracle10g出现Enterprise Manager 无法连接到数据库实例解决办法...
- WebApi 数据保护操作未成功。这可能是由于未为当前线程的用户上下文加载用户配置文件导致的。当线程执行模拟时,可能会出现此情况。,ExceptionType:System.Security....
- CVPR 2021 论文分享会预告
- Codeforces Round #321 (Div. 2)
- 字体编辑用中日韩汉字Unicode编码表
- linux ipv4文件,Linux IPV4 IPV6地址批量Ping脚本(工具)
- 记一位空降老大(BAT高级总监)的几把火(欢迎大家留言讨论赐教)
- 【推荐系统】:Deep Crossing模型解析以及代码实现
- java 多线程重温
- csr867x入门之串口AT指令协议(三)
- MYSQL8.0远程连接出现1045错误(Linux)
- 2022视频编码招聘面经
- 揭开RedisShake的秘密
- 爬取东方财富网数据笔记
- 山东省济宁市谷歌高清卫星地图下载
热门文章
- sht20中写用户寄存器_数字输出温湿度传感器HTU21D和SHT21对比评测(图文)
- 越过长城,走向世界!中国第一封 Email 发出 30 年
- 数学袖珍电子版与数学传播互联网
- UDP 分片 与 丢包,UDP 真的比 TCP 高效吗?UDP 的应用场景
- Flutter 路由传参配置
- 计算机辅助产品设计表达,计算机辅助工业设计综合表达方法与实例
- 数据库应用与设计的四个实验
- 前言 - 现代密码学导论 Introduction to Modern Cryptography
- Mysql的IFNULL 和NULLIF用法小结
- hadoop-fs.defaultFS