固定定位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中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
随机推荐
- Codeforces 1151E 统计贡献
题意:给你一个数组a,设函数f(l, r)为数组a中权值在[l, r]之间的连通块的数目,比如a = [1, 3, 2, 1], f(1, 2) = 2, 连通块是位置1和位置3,4.问Σ(i = 1 ...
- 笔记37 Spring Web Flow——流程的组件
在Spring Web Flow中,流程是由三个主要元素定义的:状态.转移和 流程数据. 一.状态 Spring Web Flow定义了五种不同类型的状态.通过选择Spring Web Flow的状态 ...
- VMWare 禁用虚拟内存文件（*.vmem）
1.使用 VMWare 虚拟机,虚拟机启动后,会在虚拟机目录下建立一个与虚拟内存大小相同的 .vmem文件,例如:564db13c-c92d-3d3a-41a0-f62af7536fda.vmem. ...
- pandas的read_csv踩到的坑
read_csv要注意,如果没有设置index_col时,读出来的会在索引上方加上Unnamed:0.可以通过设置index_col来解决这个问题. import pandas as pd impor ...
- Perl 运算符
Perl 运算符 运算符是一种告诉编译器执行特定的数学或逻辑操作的符号,如: 3+2=5. Perl 语言内置了丰富的运算符,我们来看下常用的几种: 算术运算符 比较运算符 逻辑运算符 赋值运算符 位 ...
- C++从string中删除所有的某个特定字符【转载】
转载自https://www.cnblogs.com/7z7chn/p/6341453.html C++中要从string中删除所有某个特定字符, 可用如下代码 str.erase(std::remo ...
- HDU5923-Prediction-有继承味道的并查集
目录 目录 思路: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 目录 题意:传送门 原题目描述在最下面. 有一个n个节点m条边的无向图和一个m个节点的有根树(根为1).树上每 ...
- AT指令集之Call
1.//unsolicited result code,URC表示BP->AP+ESIPCPI:<call_id>,<dir>,<sip_msg_type>, ...
- 20140315 模板类pair的用法 2、visual 2010调整代码格式是ctrl+k+
1.模板类pair的用法 包含头文件#include<utility> http://blog.csdn.net/laixingjun/article/details/9005200 ...
- 学习k8s的经验
最近在学k8s,总结一下安装k8s的坑. 1.晚上关于k8s的学习资料很多,多不如精,这个博客很好,https://blog.csdn.net/sinat_35930259/article/categ ...