- A+
所属分类：Web前端
✨课程链接
【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili
✨学习笔记
默认情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid red; padding: 0; } #first{ background-color: #0093E9; border: 1px dashed yellow; } #second{ background-color: #80D0C7; border: 1px dashed blue; } #third{ background-color: salmon; border: 1px dashed green; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html> 相对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 相对定位 相对于自己原来的位置 进行指定的偏移 相对定位的话 它仍然在标准文档流中 原来的位置会被保留 position: relative top left bottom right; --> <style> body{ padding: 20px; } div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid red; padding: 0; } #first{ background-color: #0093E9; border: 1px dashed yellow; /*相对定位*/ position: relative; top: -20px; left: 20px; } #second{ background-color: #80D0C7; border: 1px dashed blue; } #third{ background-color: salmon; border: 1px dashed green; position: relative; bottom: -10px; right: 20px; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html> 方块定位练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 300px; height: 300px; padding: 10px; border: 2px solid red; } a{ width: 100px; height: 100px; text-decoration: none; background: salmon; line-height: 100px; text-align: center; color: white; display: block; } a:hover{ background: #0093E9; } .a2,.a4{ position: relative; left: 200px; top: -100px; } .a5{ position: relative; left: 100px; top: -300px; } </style> </head> <body> <div id="box"> <a class="a1" href="#">链接1</a> <a class="a2" href="#">链接2</a> <a class="a3" href="#">链接3</a> <a class="a4" href="#">链接4</a> <a class="a5" href="#">链接5</a> </div> </body> </html> 绝对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 绝对定位 基于xxx定位 上下左右 1. 在没有父级元素的情况下 相对于浏览器定位 2. 假设父级元素存在定位 相对于父级元素进行偏移 3. 在父级元素范围内移动 相对于父级或浏览器的位置 进行指定的偏移 绝对定位的话 它不在标准文档流中 原来的位置不会被保留 --> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid red; padding: 0; position: relative; } #first{ background-color: #0093E9; border: 1px dashed yellow; } #second{ background-color: #80D0C7; border: 1px dashed blue; /*绝对定位*/ position: absolute; right: 30px; top: -10px; } #third{ background-color: salmon; border: 1px dashed green; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html> 固定定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 1000px; } div:nth-of-type(1){ /*绝对定位 相对于浏览器*/ width: 100px; height: 100px; background: red; position: absolute; right: 0; bottom: 0; } div:nth-of-type(2){ /*固定定位 fixed*/ width: 100px; height: 100px; background: yellow; position: fixed; right: 0; bottom: 0; } </style> </head> <body> <div>div1</div> <div>div2</div> </body> </html> z-index及透明度
#content{ margin: 0; padding: 0; width: 200px; overflow: hidden; font-size: 12px; line-height: 25px; border: 1px black solid; } ul,li{ margin: 0; padding: 0; list-style: none; } /*父级元素相对定位*/ #content ul{ position: relative; } .tipText,.tipBackground{ position: absolute; width: 200px; height: 25px; top: 140px; } .tipText{ color: white; z-index: 999; } .tipBackground{ background: black; /*背景透明度*/ opacity: 0.5; /*注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。*/ } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- z-index 默认是0 最高无限制--> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="content"> <ul> <li><img src="images/1.jpg" alt="【前端】CSS3学习笔记（五）——定位" alt=""></li> <li class="tipText">图片一</li> <li class="tipBackground"></li> <li>时间：2021-07-07</li> <li>地点：地球</li> </ul> </div> </body> </html>
⭐转载请注明出处
本文作者：双份浓缩馥芮白
原文链接：https://www.cnblogs.com/Flat-White/p/14983614.html
版权所有，如需转载请注明出处。
