CSS定位
一.定位
1.使用场景
浮动可以让多个块级盒子一行没有缝隙排列显示 经常用于横向排列盒子
定位可以让盒子自由的在某个盒子内移动或者固定在屏幕中某个位置 并且可以压住其他盒子
2.定位的组成
定位：将一个盒子定在某个位置 所以定位也是排放盒子 按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式
定义：用于指定一个元素在文档中的定位方式
通过CSS中的position属性来设置
分为四种：静态定位static 相对定位relative 绝对定位absolute 固定定位 fixed
边偏移
定义：决定了该元素的最终位置 （加了边偏移的像素值才会移动）
有四个方向 left top right bottom
3.静态定位 static（了解）
默认的定位方式 无定位的意思 按照标准流特性来摆放位置 没有边偏移 很少用到
（静态定位就是标准流 有标准流所有的特性）
4.相对定位 relative*
元素在移动时 相对于他原来的位置来说 来进行移动
原来的位置依然继续占有 后面盒子仍以标准流对待他（不脱标 继续保留原来的位置）
选择器 {
postion: relative;
}
5.绝对定位 absolute*
绝对定位是元素在移动位置的时候 是相对他父元素来说
特点：如果没有祖先元素 或者祖先元素没有定位 则以浏览器为准定位。
如果父级元素有定位 就会以最近一级的有定位的祖先元素为参考点移动位置
绝对定位会脱标 改变位置后 会不占有位置
选择器 {
postion: absolute;
}
总结：子绝（对定位）父相（相对定位） 也可能用到其他的
6.固定定位 fixed*
固定定位是以浏览器的可视区为参考 放置元素 跟父元素没有关系 不跟随滚动条滚动
固定定位不在占有原先位置 也是脱标的 可以看作一种特殊的绝对定位
选择器 {
postion: fixed;
}
问：如何让一个盒子固定在版心右侧？
答：让他先固定定位到盒子left:50%走到浏览器中间，再让固定盒子的margin-left:版型宽度的一般距离 多左版心宽度的一半位置就可以让其靠版心盒子右侧对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xiaojiqiao</title>
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
position: fixed;
left: 50%;
margin-left: 405px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="w">版心盒子 800像素</div>
</body>
</html>
7.粘性定位 sticky(了解)
以浏览器的可视窗口为参照点移动元素 占有原先位置 （相对定位和固定定位）
必须加top left right bottom 其中一个才有效
选择器 {
postion: sticky;
}
兼容性差 IE不适配
8.定位的叠放次序
值可以是负数 正数 0 数字越大 盒子越靠上面 （默认是auto） 没有单位 只有定位的盒子才有这个属性z-index
选择器 {
z-index: 1;
}
绝对定位会完全压住盒子 但是不会压住下面标准流中的文字 但是
绝对定位（固定定位）会压住下面标准流的所有内容
浮动之所以不会压住文字 是因为浮动设计的目的就是为了做图片环绕的 文字会围绕浮动元素
二.案例
1.轮播图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tb-promo {
position: relative;
width: 400px;
height: 400px;
background-color: pink;
margin: 100px auto;
}
.tb-promo img {
width: 400px;
height: 400px;
}
/* 并集选择器 */
.prev,
.next {
position: absolute;
top: 50%;
margin-top: -15px;
width: 20px;
height: 30px;
background: rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 30px;
color: #fff;
text-decoration: none;
}
.prev {
/* 加了绝对定位的盒子可以直接设置高度和宽度 */
left: 0;
border-radius: 0 15px 15px 0;
}
.next {
right: 0;
border-radius: 15px 0 0 15px;
}
.promo-nav {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
background-color: rgba(255, 255, 255, .3);
border-radius: 15px;
}
.promo-nav li {
width: 8px;
height: 8px;
background-color: #fff;
float: left;
border-radius: 50%;
margin: 3px;
}
.promo-nav .selected {
background-color: #ff5000;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="img/ying.png" alt="">
<a href="#" class="prev"> < </a>
<a href="#" class="next"> > </a>
<!-- 原点 -->
<ul class="promo-nav">
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
2.网页布局总结
大部分html标签是一个盒子 通过css的浮动和定位可以让每一个盒子排列成网页
一个网页是标准流 浮动 定位一起布局完成的
标准流：可以让盒子上下排列或者左右排列 垂直的块级盒子显示就用标准流布局
浮动：让多个块级元素左右对齐盒子 或者在一行显示 多个块级盒子水平显示用浮动布局
定位：层叠的概念 让多个盒子前后叠压显示 元素自由在某个盒子内移动就用定位布局
3.土豆网鼠标经过显示遮罩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>土豆网鼠标经过显示遮罩</title>
<style>
.tudou {
position: relative;
width: 400px;
height: 400px;
background-color: black;
margin: 30px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.mask {
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.4) no-repeat center;
}
/* 当鼠标经过 tudou这个盒子 就会让遮罩层显示出来 */
.tudou:hover .mask{
/* 不是转换为块级元素 而是显示图片 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<div class="mask">
<img src="img/youla.png" alt="">
</div>
<img src="img/ying.png" alt="">
</div>
</body>
</html>
三.元素显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素显示与隐藏-display</title>
<style>
.peppa {
/*
**以后和js相联系 做很多网页特效--很重点**
display: block; 除了有转换为块级元素之外 同时还有显示元素的意思
display: none; 隐藏对象 不占有原来的位置**
*/
display: block;
width: 200px;
height: 200px;
background-color: pink;
}
.george {
width: 200px;
height: 200px;
background-color: skyblue;
}
.baba {
/*
隐藏元素后 继续占有原来的位置
visibility: hidden; 元素隐藏
visibility: visible; 元素可视
*/
visibility: hidden;
width: 200px;
height: 200px;
background-color: yellow;
}
.mama {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="peppa">佩奇</div>
<div class="george">乔治</div>
<div class="baba">猪爸爸</div>
<div class="mama">猪妈妈</div>
</body>
</html>
溢出的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素的溢出</title>
<style>
.yuanshen {
/*
overflow: visible; 默认形式都显示出来
overflow: hidden; 溢出隐藏 没有删除就是看不见
overflow: scroll; 滚动条 全部显示
overflow: auto; z在需要的时候添加滚动条
*/
overflow: auto;
width: 200px;
height: 200px;
border: 3px solid pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="yuanshen">在七种元素交汇的大陆——「提瓦特」，
每个人都可以成为神。 你从世界之外漂流而来，降临大地。
在这广阔的世界中，你自由旅行、结识同伴、寻找掌控尘世元素的七神，
直到与分离的血亲重聚，在终点见证一切旅途的沉淀。 维系者正在死去，
创造者尚未到来。面对无法掌控的境遇，人类总会喟叹自身的无力……
但在人生最陡峭的转折处，若有凡人的渴望达到极致，神明的视线就将投射而下。
当失散的双子在尘沙中重聚、世界的谜底在「神之眼」中尽数显现之时—— 旅行者，
你将去往何方？ 《原神》是由米哈游自研的一款全新开放世界冒险RPG。
你将在游戏中探索一个被称作「提瓦特」的幻想世界。 在这广阔的世界中，
你可以踏遍七国，邂逅性格各异、能力独特的同伴，与他们一同对抗强敌，
踏上寻回血亲之路；也可以不带目的地漫游，
沉浸在充满生机的世界里，让好奇心驱使自己发掘各个角落的奥秘……
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
