固定定位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中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
随机推荐
- python_django_views视图模块
视图(views.py):接收web请求,并响应web请求 在视图响应web请求的过程中,响应文件可能是网页,也可能是json数据 若响应的是网页,我们可分为: 地址重定向的网页请求(子类HttpRe ...
- Algo: Binary search
二分查找的基本写法: #include <vector> #include <iostream> int binarySearch(std::vector<int> ...
- 自己的php框架
spl_autoload_register('imooc::load');当我们new的类不存在,将触发括号里的方法. is_file()判断文件是否存在.
- DOM——节点操作
节点操作 var body = document.body; var div = document.createElement('div'); body.appendChild(div); va ...
- 引入CSS样式表（书写位置）
CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head ...
- NX二次开发-UFUN更改图纸页比例UF_DRAW_set_drawing_info
#include <uf.h> #include <uf_draw.h> #include <uf_part.h> UF_initialize(); //获得当前图 ...
- NX二次开发-bat脚本文件切换NX的环境变量(NX路径和语言)
路径环境变量切换到NX9.bat @echo off setx /M UGII_BASE_DIR "D:\Program Files\Siemens\NX 9.0" ------- ...
- iOS Undefined symbols for architecture armv7:
armv6 iPhone.iPhone 3G iPod 1G.iPod 2G armv7 iPhone 3GS.iPhone 4 iPod 3G.iPod 4G.iPod 5G iPad.iPad 2 ...
- python爬虫教程之美丽汤（一）
python 爬虫之美丽汤 BeautifulSoup 作者: jwang106 1. 使用requests获取网页的html源码 import requests from bs4 import Be ...
- faster-rcnn算法总结
faster-rcnn的整体流程比较复杂,尤其是数据的预处理部分,流程比较繁琐.我写faster-rcnn系列文章的目的是对该算法的原始版本有个整体的把握,如果需要使用该算法做一些具体的任务,推荐使用 ...