固定定位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中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
随机推荐
- 笔记30 视图解析 ——TilesViewResolver
Apache Tiles,定义适用于所有页面 的通用页面布局.Spring MVC以视图解析器的形式为Apache Tiles提 供了支持,这个视图解析器能够将逻辑视图名解析为Tile定义. 1.配 ...
- 转载-------- JSON 与 对象 、集合 之间的转换 JSON字符串和java对象的互转【json-lib】
转载--*--*---- 在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML.JSON等,JSON作为一个轻量级的数据格式比xml效率要高,XML需要很多的标签,这无疑占据了网络流量,J ...
- 一个简易h5涉及的ps技巧
事实证明,很长时间不做,是会忘掉的呀,的呀,呀,啊~ 1.合并图层 CTRL+E合并多个图层 2.切片 3.导出 文件-------导出------存储为web所用格式-------->> ...
- Spring Cloud (Spring Cloud Stream)解析
执行脚本目录 /bin windows 在其单独的目录 快速上手 下载并且解压kafka压缩包 运行服务 以Windows为例,首先打开cmd: 1. 启动zookeeper: bin\window ...
- bzoj1293题解
[题意分析] 给你一条有n个点的数轴,每个点属于一个种类,总共有k个种类.求一段最短的线段,使对于每个种类,这段线段上有至少一个点属于它. [算法分析] 1.对于50%的数据,N≤10000 对于每一 ...
- tesserocr与pytesseract模块的使用
1.tesserocr的使用 #从文件识别图像字符 In [7]: tesserocr.file_to_text('image.png') Out[7]: 'Python3WebSpider\n\n' ...
- NX二次开发-UFUN读取工程图注释UF_DRF_ask_text_data
1 NX11+VS2013 2 3 4 #include <uf.h> 5 #include <uf_ui.h> 6 #include <uf_drf.h> 7 8 ...
- idea从零搭建简单的springboot+Mybatis
需用到的sql /* Navicat MySQL Data Transfer Source Server : localhost root Source Server Version : 80012 ...
- Java-Class-@I：org.springframework.web.bind.annotation.RestController
ylbtech-Java-Class-@I:org.springframework.web.bind.annotation.RestController 1.返回顶部 2.返回顶部 1. pack ...
- shell设置时间递减脚本
经常要用shell来做时间的定时任务,尤其是用sqoop脚本拉取数据的时候,那么假如当你要导入数据是残缺的时候呢,我写了一个能自定义时间并逐条递减的程序 #!/bin/bash . /etc/pr ...