固定定位fixed，绝对定位absolute，相对定位relative；以及overflow
固定定位position:fixed
/*固定定位
1、定位属性值：fixed
2、在页面中不再占位(浮起来了)
3、一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局
4、固定定位的参考系是页面窗口(不是页面中的哪一点，而是四边参照四边)
5、左右同时存在，取左；同理上下取上
*/
<style>
body{
/*min-width设置区域的最小宽度，如果最小宽度超过页面的像素
那么页面就会有横向滚动条*/
/*min-width: 2000px;*/
}
.fix{
position: fixed;
width: 200px;
height: 300px;
right: 10px;
background: #ff5e28;
text-align: center;/*设置水平居中*/
line-height: 300px;/*设置垂直居中，因为默认文字显示在行中间*/
top:calc(50% - 150px);
}
</style>
<body>
<div class="fix"><div class="word">这是固定定位</div></div>
</body>
绝对定位
calc（a - b）:的作用是可以在括号内进行像素和百分比的加减
比如：margin：20px calc（50% - 20px）
calc（）内运算符号的两边一定要有空格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style>
.sup {
width: 180px;
height: 260px;
background-color: orange;
margin: 100px auto;
}
.sub {
width: 50px;
height: 80px;
background-color: red;
}
/*绝对定位：
1、定位属性值：absolute
2、在页面中不再占位(浮起来了)，就无法继承父级的宽度(必须自己自定义宽度)
3、一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局
4、绝对定位的参考系是最近的定位父级(不是父级中的哪一点，而是四边参照四边)
5、左右同时存在，取左；同理上下取上
6、当父级定位了，子级参照父级定位，又可以重新获取父级宽度(也可以在计算中拿到父级高度)
*/
.sub {
position: absolute;
left: calc(50% - 25px);
right: 0;
bottom: 0;
top: calc(50% - 40px);
}
/*需求：
1）父级需要定位 - 辅助自己绝对定位，作为自己绝对定位的参考系
2）父级定位了，但是不能影响自身原有布局 - 虽然定位，但是不浮起来
结论：相对定位 => 父相子绝
*/
.sup {
/*父级相对定位的目的：1）不影响自身布局 2）辅助自己绝对定位布局*/
position: relative;
}
/*body {*/
/*width: 1000px;*/
/*height: 600px;*/
/*position: fixed;*/
/*}*/
/*.sup {*/
/*position: fixed;*/
/*}*/
</style>
</head>
<body>
<div class="sup">
<div class="sub"></div>
<h3>hhhhhhhhhhhh</h3>
</div>
</body>
</html>
绝对定位中，如果父级没有绝对或者相对定位，那么继续往上层找，如果都没有则根据body进行定位。
相对定位
相对定位只要作用是给辅助子级的绝对定位提供一个参照物。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: orange;
margin: 0 auto;
}
h1 {
margin: 0;
}
/*相对定位：
1、定位属性值：relative
2、在页面中依旧占位，完全保留之前的所有布局
3、一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局
4、相对定位的参考系是自身原有位置(当前位置)(不是自身中的哪一点，而是四边参照四边)
5、左右同时存在，取左；同理上下取上，布局移动后，也不影响自身原有位置(兄弟布局也不会变化)
作用：辅助于子级的绝对定位布局，一般不用于自身布局
*/
.box {
position: relative;
/*left: -10px;*/
bottom: 20px;
top: 400px;
}
</style>
</head>
<body>
<h1>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</h1>
<div class="box"></div>
<h1>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</h1>
</body>
</html>
overflow属性
用来处理超出区域的内容如何显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow属性</title>
<style>
.box {
width: 200px;
height: 300px;
background-color: pink;
}
/*
1）默认子级(内容)超出父级显示区域，不会做任何处理(正常显示)
2）overflow: hidden; - 隐藏超出的内容
3）overflow: scroll; - 以滚动方式显示内容(一定会预留滚动条的占位)
4）overflow: auto; - 有超出内容才以滚动方式显示
*/
.box {
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂
</div>
</body>
</html>
固定定位fixed，绝对定位absolute，相对定位relative；以及overflow的更多相关文章
- Position属性四个值：static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- Position属性四个值：static、fixed、absolute和relative的区别
1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative(相对定位):生成相对 ...
- [Web 前端] 019 css 定位之绝对定位与相对定位
1. 关于定位 我们可以使用 css 的 position 属性来设置元素的定位类型 postion 的设置项如下 设置项 释义 relative 生成相对定位元素元素所占据的文档流的位置不变元素本身 ...
- position的absolute与fixed，absolute与relative共同点与不同点
absolute与fixed 共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上 不同点: absol ...
- ie6与固定定位fixed,+ 条件注释格式注意
ie6并不支持position:fixed, ie7+都支持fixed定位, ie6固定定位实现方法1: <!DOCTYPE html> <html> <head> ...
- HTML静态网页的格式与布局（position：（fixed、absolute、relative）、分层、float（left、right））
一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 1.外层没有position:absolute(或r ...
- 固定定位fixed（IE6）
position: fixed; left:200px; top:100px; _left:200px; _top:100px ...
- position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
- 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
随机推荐
- java ThreadPoolExecutor 异常捕获
一,创建一个线程池 其中: public void rejectedExecution(Runnable r, ThreadPoolExecutor executor) 饱和策略执行时的具体逻辑. p ...
- wireshark 分析 TCP 请求（转）
转自:http://supben.iteye.com/blog/2329780 先看一段代码 程序片段是一个RPC调用 ,根据简历id获取简历实体.本地IP 10.252.156.132, 远程ip ...
- python_django_template模块
官方文档 博文导航: 定义模板: 变量 标签: if for include url csrf_token 过滤器: 简单过滤器 HTML转义 加减乘除的过滤器 注释: 模板继承 模板语言:Dja ...
- Python自学:第四章 切片
# -*- coding: GBK -*- players = ['charles', 'martina', 'michael', 'florence', 'eli'] print(players[0 ...
- java常用类——比较器
Comparable和Comparator接口都是为了对类进行比较,众所周知,诸如Integer,double等基本数据类型,java可以对他们进行比较,而对于类的比较,需要人工定义比较用到的字段比较 ...
- CSS——外观样式及应用
CSS注释 CSS规则是使用 /* 需要注释的内容 */ 进行注释的,即在需要注释的内容前使用 “/*” 标记开始注释,在内容的结尾使用 “*/”结束. 例如: p { font-size: 14p ...
- hdu多校第六场1008 （hdu6641）TDL 暴力
题意: 设f(n,m)为比n大的第m个和n互质的数,给定一个k=(f(n,m)-n)xor n和m,求最小的n 题解: 对于给定的m而言,一个k周围合法的n分布的很密,因此在k的邻域暴力搜索即可. # ...
- C/Python/Java环境变量配置
链接 全图预览: Java: 只需添加下面三个环境变量即可使用Java.对照这我的添加就行. CLASSPATH的内容: .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\li ...
- 其它课程中的python---4、Matplotlib最最最最简单使用
其它课程中的python---4.Matplotlib最最最最简单使用 一.总结 一句话总结: 慢慢来吧,不着急,心态平和和沉稳:每次和世界交互,你就能感受到无比的自信 1.如何区别python2和p ...
- Python 利用微信端口查看列车时刻表
import requests """ 该程序查看列车时刻 """ url0 = 'http://www.webxml.com.cn/Web ...