07定位以及锚点链接

07定位以及锚点链接

所谓定义，就是将元素放在指定的位置和上

语法

设置定位方式
	position:;
属性值有fixed,absolute,relative

设置坐标
	left:;
    top:;
	right:;
	bottom:;
属性值就是相对应的px值或者%值
但是left和right只能选其一，top和bottom只能选其一，且两者都必须存在

一、静态定位

元素自带的定位方式，一般不需要设置

position:static;

二、固定定位

设置了固定定位的盒子不会随屏幕窗口的滑动而改变位置，就是相对可视窗口固定位置，一般用于侧导航栏

position:fixed;

让盒子完全居中于大小位子的盒子

方法一

先将盒子的起始位置居于屏幕中间，再通过margin来移动位置使盒子居中

position:fixed;
top:50%;
margin-top:-盒子高度的一半px;
left:50%;
margin-left:-盒子宽度的一半px;

方法二

除了margin可以移动盒子的位置，transform中的translate属性值也可以移动盒子的位置

position:fixed;
top:50%;
transform:translateY(-盒子高度的一半px);
left:50%;
transform:translateX(-盒子宽度的一半px);

方法三

让盒子自适应居中

position:fixed;
top:0px;
right:0px;
bottom:0px;
left:0px;
margin:auto;

三、相对定位

基于元素本身的位置，从元素本身的位置出发，设置方向距离达到想要的位置，但是由于margin属性也能实现该定位所能达到的位置，所以相对定位一般只会为了配合绝对定位使用

position:relative;

四、绝对定位

基于最近被设置非静态定位的上级进行定位，如果都没有，就基于浏览器第一屏进行定位

简单来说，就是当需要使用的时候需要给父级元素设置一个非静态定位来确保该定位的正常使用，而为了父级元素能够正常使用，所以常常将需要设置绝对定位的父级元素设置相对定位，同时父级元素只设置

position:relative

而不需要设置坐标或设置坐标为0

再在想要的盒子设置绝对定位

position:absolute

五、粘性定位

设置了粘性定位的盒子在第一屏页面滑动没有任何影响，当页面滑动到定位设置的值时，会像固定定位一样在可视窗口固定位置。粘性定位是一种将固定定位和绝对定位相结合的定位方式

position:sticky;

坐标只需要设置一个

六、锚点链接

可以通过锚点链接跳转到同一页面的不同位置

语法

<div id="id名">
    要跳转到的区域的内容
</div>
<a href="#id名">链接内容</a>

常常用于侧导航栏

七、利用锚点链接制作一个简易手动轮播图

设置样式

*{
	margin:0;
	padding: 0;
	text-decoration: none;
	color:black;
}
img{
	vertical-align: top;
}
.wrap{
	width:500px;
	height: 375px;
	position: relative;
}
.box1 {
	width: 500px;
	height: 375px;
	overflow: hidden;
}
.box2{
	position:absolute;
	bottom:5px;
	right: 5px;
}
.box2 a{
	text-decoration: none;
	color:black;
	border:1px solid black;
	font-size: 20px;
}
box3{
	width:20px;
	height:20px;
	position:absolute;
	top:50%;
	margin-top:-10px;
	left: 10px;
	border:1px solid black;
	border-radius: 2px;
	text-align: center;
	line-height: 20px;
}
.box4{
	width:20px;
	height:20px;
	position:absolute;
	top:50%;
	margin-top:-10px;
	right: 10px;
	border:1px solid black;
	border-radius: 2px;
	text-align: center;
	line-height: 20px;
}
img:hover body{
	background: black;
}

设置结构

<div class="wrap">
	<div class="box1">
		<img id="a1" src="img04.jpg" alt="">
		<img id="a2" src="img05.jpg" alt="">
		<img id="a3" src="img06.jpg" alt="">
		<img id="a4" src="img07.jpg" alt="">
	</div>
	<div class="box2">
		<a href="#a1">1</a>
		<a href="#a2">2</a>
		<a href="#a3">3</a>
		<a href="#a4">4</a>
	</div>
	<div class="box3">
		<a href="#">&lt;</a>
	</div>
	<div class="box4">
		<a href="#">&gt;</a>
	</div>
</div>

左右键实现了绝对定位的效果，但是没有锚点链接的效果，只有数字1234实现了锚点链接的效果