CSS定位"/>
12.CSS定位
文章目录
- 1.文本溢出
- 2.标签定位
- 2.1静态定位
- 2.2相对定位
- 2.3 绝对定位
- 2.4固定位
- 3.脱离文档流
- 3.1浮动
- 3.2相对定位
- 3.3绝对定位
- 3.4固定定位
- 4.index模态宽
- 5.透明度
1.文本溢出
一个块级标签没有设置固定大小，内容会将占多大，标签也会对应的被撑多大。
如果固定了标签的大小，内容过多会溢出属性范围。
overflow:hidden; 内容溢出,超出部分不显示。
overflow:scroll; 上下滚动条形式查看内容。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS练习</title><style>.c1 {border: 1px solid red;}.c2 {height: 100px;width: 100px;border: 1px solid red;}.c3 {height: 50px;width: 50px;border: 1px solid red;overflow: hidden;}.c4 {height: 80px;width: 80px;border: 1px solid red;overflow: scroll;}</style></head><body><p class="c1">三更灯火五更鸡，正是男儿读书时。黑发不知勤学早，白首方悔读书迟。</p><br><p class="c2">三更灯火五更鸡，正是男儿读书时。黑发不知勤学早，白首方悔读书迟。</p><br><p class="c3">三更灯火五更鸡，正是男儿读书时。黑发不知勤学早，白首方悔读书迟。</p><br><p class="c4">三更灯火五更鸡，正是男儿读书时。黑发不知勤学早，白首方悔读书迟。</p>
</body>
</html>
2.标签定位
position 属性规定元素的定位类型。1.静态定位: 静态：所有的标签都是静态的(static),无法改变位置。2.相对定位：相对于标签原来的位置做移动标签（relative）。3.绝对定位: 相对于已经定位过的父标签做移动，如果没有父标签则以body为参照。4.固定定位: 相对于浏览器窗口，标签固定在某个位置。
2.1静态定位
所有的标签默认为static静态的,无法修改位置.
需要定位的标签position的值一定不能是static.
2.2相对定位
position: relative;相对定位。
left: 50px; 从左往右 写负数方向相反
top: 50px; 从上往下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位</title><style>body {margin: 0;}.c1 {height: 100px;width: 100px;background-color: red;position: relative;/*相对定位标签又static变成relative它的性质从原来没有定位的标签变成已经定位过的标签*/left: 50px; top: 50px;}</style>
</head><body><div class="c1"></div>
</body>
</html>
2.3 绝对定位
就基于父标签定位。
一般在不知道页面其他标签位置和参数，只给一个父标签的参数时使用。
position: absolute;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位置</title><style>body {margin: 0;}.c1 {height: 50px;width: 100px;background-color: #6ee2a2;}.c2 {height: 50px;width: 100px;background-color: #86cfe5;position: absolute; /*相对于父标签做移动*/top: 50px;left: 100px;}</style></head><body><div class="c1">div<div class="c2">div>div</div></div>
</body>
</html>
2.4固定位
固定在浏览器的某一个位置，页面动，标签始终固定。
position: fixed;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>固定定位</title><style>body {margin: 0;}.c1 {width: 70px;height: 25px;background-color: #f3d92d;border: 3px solid orange;position: fixed; /* 以浏览器为参照点*/bottom: 500px;right: 10px;}</style>
</head>
<body><div style="height: 500px; background-color: red"></div><div style="height: 500px; background-color: #59ff00"></div><div style="height: 500px; background-color: greenyellow "></div><div class="c1">充值VIP</div>
</body>
</html>
3.脱离文档流
文档流:指语言文本从左到右,从上到下显示,这是传统HTML文档的文本布局。
浮动(float)、绝对定位(absolute)、固定定位(fixed)三种方式定位会脱离文档流。
标签漂浮后，移动标签，原来位置被占用则属于脱离文档流。
3.1浮动
div1与div2是并排的关系，在div1由左边浮动到右边后，
div1的文档位置空出，div2占用原本属于div1的位置。
浮动属于脱离文档流。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动脱离文档流</title><style>#d1 {height: 100px;width: 100px;background-color: greenyellow;float: right;}#d2 {background-color: red;height: 100px;width: 100px;}</style>
</head>
<body><div id="d1">div1</div><div id="d2">div2</div></body>
</html>
3.2相对定位
div1与div2是并排的关系，在div1由左边浮动到右边后，
div1的文档位置空出，div2没有占用原本属于div1的位置。
相对定位不脱离文档流
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位</title><style>body {margin: 0;}.c1 {height: 200px;width: 400px;background-color: red;position: relative;left: 500px; /*向右移动500px*/}.c2 {height: 200px;width: 400px;background-color: #77ff00;}</style>
</head>
<body><div class="c1">div1</div><div class="c2">div2</div>
</body>
</html>
3.3绝对定位
div1与div2、div3是并排的关系，在div2由左边浮动到右边后，
div2的文档位置空出，div3占用原本属于div2的位置。
绝对路径脱离文档流，原来的位置被占用。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位</title><style>body {margin: 0;}.c1 {height: 200px;width: 400px;background-color: #c5c5f1;}.c2 {height: 200px;width: 400px;background-color: red;position: absolute;left: 500px;}.c3 {height: 200px;width: 400px;background-color: salmon;}</style>
</head>
<body><div class="c1">div1</div><div class="c2">div2</div><div class="c3">div3</div>
</body>
</html>
3.4固定定位
div1与div2、div3是并排的关系，在div2由左边浮动到右边后，
div2的文档位置空出，div3占用原本属于div2的位置。
固定定位脱离文档流
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>固定定位</title><style>body{margin: 0;}#d1{height: 200px;width: 400px;background-color: #c5c5f1;}#d2{height: 200px;width: 400px;background-color: red;position:fixed;bottom: 10px;right: 20px}#d3{height: 200px;width: 400px;background-color: salmon;}</style>
</head>
<body><div id="d1">div1</div><div id="d2">div2</div><div id="d3">div3</div>
</body>
</html>
4.index模态宽
百度的帐户登入页面时三层模态框结构，使用z-index：0-100，数值越高，层级越高。
1.最底部正常文本（z-index=0） 离用户最远
2.黑色透明区(z-index=99) 中间层
3.白色注册区域（z-index100） 离用户最近
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS练习</title><style>body {margin: 0;}.cover {position: fixed;left: 0; top: 0;right: 0;bottom: 0; /* 铺满屏幕 */background-color: rgba(0, 0, 0, 0.4);z-index: 99;}.modal {height: 300px;width: 400px;background-color: white;position: fixed;left: 50%; /* 顶点 水平 垂直 居中 */top: 50%;z-index: 100;/* 中心居中 */margin-left: -200px;margin-top: -150px;}</style>
</head>
<body><div>底层页面内容</div><div class="cover"></div><div class="modal"><h1>登入页面</h1><p>username: <input type="text"></p><p>password: <input type="text"></p><button>点我</button></div>
</body>
</html>
5.透明度
opacity:0.2; 设置透明度。
不单单可以修改颜色的透明都还可以修改字体的透明度，
rgba只能影响颜色而opacity可以修改颜色和字体。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>透明度</title><style>.c1 {background-color: rgba(0, 0, 0, 0.5); /* 设置背景透明度 */}.c2 {opacity: 0.2; /* 设置字体透明度 */color: salmon;}</style>
</head>
<body><p class="c1">111</p><p class="c2">222</p>
</body>
</html>
更多推荐
12.CSS定位
发布评论