CSS定位中“父相子绝”
一、定位的介绍
定位有三种：相对定位(position:relative)、绝对定位(position:absolute)、固定定位(position:fixed)
二、三种定位的用法，特点和实例
2.1、相对定位 特性：不脱标、形影分离、老家留坑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> *{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px; }
.box1{
background-color: red;
}
.box2{
background-color: green;
position: relative;
/*top: 50px;*/
left: 300px;
}
.box3{
background-color: blue;
} </style>
</head>
<body> <!-- 相对定位三大特性： 1.不脱标 2.形影分离 3.老家留坑
所以说 相对定位 在页面中没有什么太大的作用。影响我们页面的布局。但是我们不要使用相对定位来做压盖效果--> <div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div> </body>
</html>
相对定位的特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接美化</title>
<style type="text/css">
/*清除默认样式*/
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto ;
background-color: purple;
/*设置圆角*/
border-radius: 10px;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li.xiaoming{
position: relative;
top: 40px;
left: 30px;
}
.nav ul li a{
display: block;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Hanzipen SC';
}
/*a标签除外，不继承父元素的color*/ .nav ul li a:hover{
background-color: red;
font-size: 22px;
}
</style>
</head>
<body> <div class="nav">
<ul>
<li>
<a href="">网站导航1</a>
</li>
<li class="xiaoming">
<a href="">网站导航2</a>
</li>
<li>
<a href="">网站导航3</a>
</li>
<li>
<a href="">网站导航4</a>
</li>
<li>
<a href="">网站导航5</a>
</li>
<li>
<a href="">网站导航6</a>
</li>
</ul>
</div>
</body>
</html> <!-- 因为相对定位有坑，占着茅房不拉屎，所以我们一般不要使用相对定位来做压盖效果。它在页面中，效果作用极小，就两个作用：
1.微调元素位置
2.做绝对定位的参考（父相子绝） 讲绝对定位会讲 --> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
margin: 100px;
}
.user{
font-size: 25px;
}
.btn{
position: relative;
top: 3px;
left: -5px;
} </style>
</head>
<body>
<!-- 微调我们元素位置--> <div> <input type="text" name="username" class="user">
<input type="button" name="" value="点我" class="btn">
</div> </body>
</html>
相对定位的用途
2.2、绝对定位 特性：脱标、做遮盖效果，提升了层级、设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> *{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: red; /*绝对的定位： 1.脱标 2.做遮盖效果，提升层级 3.设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。*/
position: absolute;
}
.box2{
background-color: green; }
.box3{
background-color: blue;
}
span{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
} </style>
</head>
<body> <div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span>文字</span> </body>
</html>
绝对定位的特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
width: 100%;
height: 2000px;
border: 10px solid green;
} .box{
width: 200px;
height: 200px;
background-color: red;
/*绝对定位参考点：
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
*/
position: absolute;
top: 100px;
/*bottom: 100px;*/
left: 18px;
}
</style>
</head>
<body>
<div class="box"> </div> </body>
</html>
绝对定位参考点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 5px solid red;
margin: 100px;
/*父盒子设置相对定位*/
position: relative;
padding: 50px;
}
.box2{
width: 300px;
height: 300px;
background-color: green;
position: relative; } .box p{
width: 100px;
height: 100px;
background-color: pink;
/*子元素设置了绝对定位*/
position: absolute;
top: 0;
left: 0;
} /*父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点
这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
*/ </style>
</head>
<body>
<div class="box"> <div class="box2">
<p></p>
</div>
</div> </body>
</html>
绝对定位以盒子作为参考点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 5px solid red;
margin: 100px;
/*父盒子设置相对定位*/
position: absolute;
padding: 50px;
} .box p{
width: 100px;
height: 100px;
background-color: pink;
/*子元素设置了绝对定位*/
position: absolute;
top: 10px;
left: 20px;
} </style>
</head>
<body> <!-- 不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点 。 注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整位置信息。 -->
<div class="box"> <p></p> </div> </body>
</html>
绝对定位以父辈盒子做参考点2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
margin: 100px;
border: 10px solid red;
position: relative;
padding: 50px;
}
.father p{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 10px;
left: 40px;
}
</style>
</head>
<body>
<div class="father">
<p></p>
</div> </body>
</html>
绝对定位的盒子无视父辈的padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
background: #000;
}
.box .c{
width: 960px;
height: 69px;
background-color: pink;
/*margin: 0 auto;*/
position: relative;
left: 50%;
margin-left: -480px; /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
} </style>
</head>
<body>
<div class="box">
<div class="c"></div>
</div> </body>
</html>
绝对定位盒子居中
2.3、固定定位 特性：脱标、遮盖，提成层级、固定位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> *{
padding: 0;
margin: 0;
}
p{
width: 100px;
height: 100px;
background-color: red;
/*固定定位：固定当前的元素不会随着页面滚动而滚动，
特性：1.脱标 2.提升层级 3.固定不变 不会随页面滚动而滚动 参考点：设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点 作用： 1.返回顶部栏 2.固定导航栏 3.小广告 */
position: fixed;
bottom: 30px;
right: 40px;
}
</style>
</head>
<body> <div>
<p></p>
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt=""> </div>
</body>
</html>
固定定位特性和应用场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定导航栏</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
body{
/*给body设置导航栏的高度，来显示下方图片的整个内容*/
padding-top: 49px;
}
.wrap{
width: 100%;
height: 49px;
background-color: #000;
/*设置固定定位之后，一定一定要加top属性和left属性*/
position: fixed;
top: 0;
left: 0; }
.wrap .nav{
width: 960px;
height: 49px;
margin: 0 auto; }
.wrap .nav ul li{
float: left;
width: 160px;
height: 49px; text-align: center;
}
.wrap .nav ul li a{
width: 160px;
height: 49px;
display: block;
color: #fff;
font: 20px/49px "Hanzipen SC";
background-color: purple;
}
.wrap .nav ul li a:hover{
background-color: red;
font-size: 22px;
} </style>
</head>
<body>
<div class="wrap">
<div class="nav">
<ul>
<li>
<a href="#">网页开发</a>
</li>
<li>
<a href="#">网页开发</a>
</li>
<li>
<a href="#">网页开发</a>
</li>
<li>
<a href="#">网页开发</a>
</li>
<li>
<a href="#">网页开发</a>
</li>
<li>
<a href="#">网页开发</a>
</li>
</ul>
</div>
</div>
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt=""> </body>
</html>
固定定位_固定导航栏
三、父相子绝
当父盒子设定为相对定位，子盒子绝对定位的参考点是父盒子的左上角。如果父盒子设定为绝对定位或者固定定位，子盒子同样是以父盒子的左上角做参考点，但是那样，父盒子就脱离标准流，没什么意义。所以一般情况下，都是要遵从“父相子绝”的原则。附一个父相子绝的案例，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 5px solid red;
margin: 100px;
/*父盒子设置相对定位*/
position: relative;
padding: 50px;
}
.box2{
width: 300px;
height: 300px;
background-color: green;
position: relative; } .box p{
width: 100px;
height: 100px;
background-color: pink;
/*子元素设置了绝对定位*/
position: absolute;
top: 0;
left: 0;
} /*父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点
这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
*/ </style>
</head>
<body>
<div class="box"> <div class="box2">
<p></p>
</div>
</div> </body>
</html>
CSS定位中“父相子绝”的更多相关文章
- CSS中的父相子绝布局
主要应用场景,就是我想要块的布局根据父级来定位,而不是根据页面. 例如,下面的例子中,我用两个半圆拼成一个正圆,思路是用一个父级标签把两个子标签包起来,父标签是一个正圆,然后子标签各占一半,先化成两个 ...
- css定位中的百分比
----转载自自己在牛人部落中的相关文章--- 在前端css定位中经常面对的一个问题是,百分比定位究竟是针对于谁定位? 一.margin,padding的百分比 首先从css的设计意图说起,在浏览器默 ...
- 深入理解CSS定位中的偏移
× 目录 [1]定位 [2]包含块 [3]偏移属性[4]绝对定位[5]格式化 [6]auto 前面的话 CSS有三种基本的定位机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位 ...
- 【转】深入理解CSS定位中的偏移
前面的话 CSS有三种基本的定位机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.但元素究竟如何定位,定 ...
- 总结vue中父向子，子向父以及兄弟之间通信的几种方式
子向父方式1:通过props,如例子中子组件test1.vue向父组件App.vue传值 App.vue代码 <template> <div id="app"&g ...
- Jquery中父，子页面之间元素获取及方法调用
一.jquery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...
- 深度剖析Vue中父给子、子给父、兄弟之间传值！
本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...
- angularjs中父，子，兄之间controller值得传递
使用angularjs,发现controller间的值传递,比较麻烦的,以后几篇文章会陆续说几种方法. 一,angularjs $broadcast $emit $on的处理思想 在一个control ...
- 有关CSS 定位中的盒装模型、position、z-index的学习心得
开始整体之前我需要说明两个概念: 第一个就是 一切皆为框 也就是说在HTML中的不管是是块级的还是内联的,都可以认为成块的,唯一的区别就是块的会独自占据一行 第二个文档流: 一个网页可以看作是 ...
随机推荐
- sqlserver 聚集索引 非聚集索引
聚集索引是一种对磁盘上实际数据重新组织以按指定的一列或者多列值排序.像我们用到的汉语字典,就是一个聚集索引.换句话说就是聚集索引会改变数据库表中数据的存放顺序.非聚集索引不会重新组织表中的数据,而是对 ...
- Angularjs 中 ng-repeat 循环绑定事件
用ng-repeat循环是如果有ng-click之类的事件需要传入参数我们一般这样写 <span class='del' ng-click="RemoveCost({{item.Id} ...
- Rider开发开发.NET Framework 4.5项目遇到的一些问题
使用rdier自带resharper功能,蛮爽的但是编译旧的项目时一直报错:Invalid option 'portable' for /debug; must be full or pdbonly' ...
- 可视化利器 TensorBoard
人工智能的黑盒: TensorBoard 的作用: 1.用TensorFlow保存图的信息到日志中 tfsummary.FileWriter("日志保存路径", sess.grap ...
- java如何在不访问数据库就可以对list分页？
废话不多说,直接上代码 import java.util.ArrayList; import java.util.List; public class demo { public static voi ...
- xposed获取context 的方法
// 应用被加壳,采用这种方式加载类 try { XposedHelpers.findAndHookMethod(Application.class, "attach", Cont ...
- Linux上使用trash回收机制来替换rm命令
因为我们日常使用的rm 命令没有恢复机制,删除了文件就找不到了,往往重要的文件,我们要特别小心才对,但是有时还是避免不了我们的误操作.可能会造成很大的影响. 本博文简单介绍一下,用trash命令仿照W ...
- computed和watch的使用场景
转载地址:https://blog.csdn.net/yuwenshi12/article/details/78561372 从作用机制和性质上看待methods,watch和computed的关系 ...
- Route Loops
当网络10.4.0.0发生故障时,RouterC检测到故障,并停止其E0接口的路由报文. 然而,路由器A和B还没有收到失败的通知. 路由器A仍然认为可以通过路由器B访问10.4.0.0.路由器A的路由 ...
- 剑指Offer编程题(python)——链表
1.从尾到头打印链表 #输入一个链表,按链表值从尾到头的顺序返回一个ArrayList.class ListNode: def __init__(self, x): self.val = x self ...