CSS的四种定位的参照物
一、static定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .c1 {
width: 100px;
height: 100px;
background: red;
position: static;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
二、relative定位
相对定位元素的定位是相对其左上顶点的正常位置进行定位,定位后元素还会占据原来的空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .c1,.c2,.c3 {
width: 100px;
height: 100px;
} .c1 {
background: red;
position: relative;
left: 100px;
} .c2 {
background: green;
} .c3 {
background: blue;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
三、absolute定位
定位后,元素脱离文档流,不再占据原来的空间。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于<html>
1.父元素设置为relative定位,子元素设置absolute定位,相对其父元素进行定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .c1 {
width: 300px;
height: 300px;
background: red;
} .c2 {
width: 200px;
height: 200px;
background: green;
position: relative;
} .c3 {
width: 100px;
height: 100px;
background: blue;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">
<div class="c3"></div>
</div>
</div>
</body>
</html>
2.祖先元素设置为relative定位,后代元素设置absolute定位,相对其祖先元素进行定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .c1 {
width: 300px;
height: 300px;
background: red;
position: relative;
} .c2 {
width: 200px;
height: 200px;
background: green;
} .c3 {
width: 100px;
height: 100px;
background: blue;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">
<div class="c3"></div>
</div>
</div>
</body>
</html>
3.元素没有已定位的祖先元素，它的位置相对于<html>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*这里不清除body的外边距,是为了能够区分html和body元素*/
html,body {
width:100%;
height:100%;
} html {
border: 3px solid yellow;
} body {
border: 3px solid purple;
} .c1 {
width: 300px;
height: 300px;
background: red;
} .c2 {
width: 200px;
height: 200px;
background: green;
} .c3 {
width: 100px;
height: 100px;
background: blue;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">
<div class="c3"></div>
</div>
</div>
</body>
</html>
四、fixed定位
元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.c1 {
width: 100px;
height: 100px;
background: red;
position: fixed;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="c1"></div>
<!--这里用br元素产生滚动条-->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
CSS的四种定位的参照物的更多相关文章
- CSS的4种定位方式比较
CSS有四种定位(Positioning)方法:Static,Relative, Absolute和Fixed 元素flow, overlap 相对参照物: 能否用offset( top, left, ...
- CSS四种定位及应用
定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...
- 页面中CSS的四种引入方式的介绍与比较
转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...
- 《网页设计基础——CSS的四种引入方式详解》
网页设计基础--CSS的四种引入方式详解 一.行内式: 规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中. 格 ...
- CSS的四种引入方式
1.使用link标签引入css文件: <head> <link rel="stylesheet" type="text/css" href=& ...
- CSS的五种定位方式
CSS中一共有五种定位: position:static:默认值 position:absolute:绝对定位 position:relative:相对对定位 position:fixed:固定定位 ...
- HTML中引入CSS的四种常用方法及各自的缺点
在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用.格式如下: ...
- sess文件编译输出css的四种方式以及使用
sess文件输出css有下面四种方式: :nested(嵌套) :compact(紧凑) :expanded(展开) :compressed(压缩) 如何使用: sass --watch style. ...
- 有关于css的四种布局
四种布局 (1).左右两侧,左侧固定宽度200px, 右侧自适应占满. (2).左中右三列,左右个200px固定,中间自适应占满. (3).上中下三行,头部200px高,底部200px高,中间自适应占 ...
随机推荐
- 第十一组 Beta版本演示
第11组 Beta版本演示 组长博客链接 https://www.cnblogs.com/xxylac/p/12039948.html 本组成员(不知道叫什么团队) 031702635 陈郑铧(组长) ...
- golang 开源项目: 配置解析模块--config
在golang中,配置文件经常使用json格式.json格式的语法,有些繁琐,尤其是出现嵌套的时候,每一块都需要大括号包裹,看起来很臃肿. 本着简单易用的原则,个人开发了一个配置解析模块config, ...
- leetcode 63 不同路径II
二维数组动态规划,还可以采用一维数组进行动态规划. class Solution { public: int uniquePathsWithObstacles(vector<vector< ...
- java删除文件夹或者文件
private static void deleteFile(File file) { if (file.exists()) { // 判断文件是否存在 if (file.isFile()) { // ...
- [VBA]指定列求和
##指定列求和 需求: 求和:列为“销售金额”的数值 Sub 求和()Dim i As Integer, j As IntegerFor i = 3 To 56For j = 15 To 81 Ste ...
- 监控Linux服务器上python服务脚本
提供给公司使用的测试平台这两天频繁地挂掉,影响到相关同事的正常使用,决定在服务器上写个监控脚本,监控到服务挂了就启动起来,一分钟检查一次.注:后台服务使用的是python.监控脚本如下: NUM=`p ...
- Stream流实现斐波那契数列
1.前言 我们都知道斐波那契数列有很多种实现方法,在jdk1.8以前没有流操作,只能通过递归或者迭代等其他方式来实现斐波那契数列, 但是jdk1.8以后,有了流操作,我们就可以使用流来实现斐波那契数列 ...
- 彻底搞懂snowflake算法及百度美团的最佳实践
写在前面的话 一提到分布式ID自动生成方案,大家肯定都非常熟悉,并且立即能说出自家拿手的几种方案,确实,ID作为系统数据的重要标识,重要性不言而喻,而各种方案也是历经多代优化,请允许我用这个视角对分布 ...
- Altera DDR2 IP核学习总结2-----------DDR2 IP核的生成
打开IP核工具,然后选择Verilog HDL选项,填写路径,写入文件名DDR2_IP.V,点击next PLL reference clock frequency填入板子晶振的频率50MHZ,这里设 ...
- python基础及安装
一.python介绍 介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写能够解释Python语言语法的解释器.Python这个名 ...