定位

最新推荐文章于 2025-02-10 17:12:42 发布

原创最新推荐文章于 2025-02-10 17:12:42 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

18 篇文章

订阅专栏

定位

position:(定位属性)
static		默认值
所有元素默认的定位属性就是static 一般不用
absolute	绝对定位 (完全脱离文档流)
自动向上检索 以最近的定位元素作为父元素 若检索不到就以html为父元素 来定位
relative	相对定位
根据自身初始所在位置来定位
fixed		固定定位(完全脱离文档流)
根据浏览器来定位
sticky		粘性定位（css3属性）
relative和fixed合体 根据overflow来定位 
只有定位元素可以使用left   right   top   bottom  z-index 属性

知识点1.静态定位 static

默认值。对象遵循常规流。没有定位。

知识点2.绝对定位 absolute

脱离文档流，通过 top,bottom,left,right 定位。设置绝对定位的元素，相对于具有定位属性的父级元素（除静态定位以外）偏移。如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位。
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

代码

一般relative和absolute一起使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位absolute</title>
<style>
body{height:2000px;}
img{position:absolute;
right:0;bottom:0;
left:0;top:0;
margin:auto;

}
</style>
</head>
<body>
<img src="images/w.png" />这是图片w系列之w4.png，希望小哥哥们喜欢！
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位absolute2-良心有木有之良心狗叼走</title>
<style>
.z{width:500px;height:500px;border:1px solid #0f0;position:fixed;}
.fu{width:300px;height:300px;border:1px solid #f00;position:absolute;}
.zi{width:100px;height:100px;background:#000;
position:absolute;right:0;bottom:0;
}
</style>
</head>
<body>

<div class="z">
	<div class="fu">
		<div class="zi"></div>		
    </div>
</div>


</body>
</html>

知识点3.相对定位 relative

参考自身静态位置通过 top,bottom,left,right 定位，偏移属性进行偏移时不会影响常规流中的任何元素（与margin区别）。以自身的原始位置进行偏移，原始位置保留。
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style>
	div{ width:200px; height:200px;}
	.box1{ background:#f99;}
	.box2{ background:#9f9; position:relative;
	left:300px; top:300px;}/* 相对定位是占文档流的，在没有设置left 和 top的情况下 实际效果和static的是一样的*/
	.box3{ background:#99f;}
</style>

</head>

<body>
	<div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

</body>
</html>

知识点4.固定定位 fixed

与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style>
	body{ width:2000px;}
	img{ position:fixed;
	right:0; left:0;/*固定定位的优先的以左（left）上（top）为齐的*/
	top:0; bottom:0;
	margin:auto;}
</style>
</head>

<body>
<img src="file:///D|/H5/Doc/day06/fangzhenghua/img/bai.png"/>花是这么的美，请珍惜他！

</body>
</html>



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位fixed</title>
<style>
body{height:2000px;}
img{position:fixed;

top:0;left:0;
right:0;bottom:0;
margin:auto;
/* 相对于居中显示*/
}
</style>
</head>
<body>

<img src="images/w.png" />这是图片w系列之w4.png，希望小哥哥们喜欢！

</body>
</html>



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位fixed2</title>
<style>
/*脱离文档流的定位元素 不写宽高 光写leftrighttopbottom会将元素拉伸*/
div{position:fixed;background:#f99;
top:0;bottom:0;
left:0;right:0;

}
</style>
</head>
<body>

<div></div>这是图片w系列之w4.png，希望小哥哥们喜欢！

</body>
</html>

知识点5.z-index深度

设置元素的层叠顺序，属性值为无单位的整数值，值较大的元素会叠加在值较小的元素之上；
（1）元素可拥有负的z-index属性值，默认值是：auto,默认层是：0层
（2）当没有设置属性或者层数相同时，跟在body中的书写顺序有关，后面的元素显示在上面
（3）z-index的属性值，只能为整数，正整数，0，负整数

定义position为非static的元素

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定位层级</title>
<style>
div{width:200px;height:200px;position:absolute;}
.box1{background:#f99;}
.box2{background:#9f9;left:50px;top:50px;z-index:-1;}
.box3{background:#99f;left:100px;top:100px;z-index:-1;}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

</body>
</html>

知识点6.偏移position

	top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 
	right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 
	bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 
	left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。

知识点 7.透明

opacity:0.5; (值0-1，ie9以下版本无效)

filter:alpha(opacity=50); (值0-100，非ie浏览器无效)

注：给父元素设置透明 子元素也会变透明

但有时候我们想背景透明 子元素不透明如何做到

做2个层叠关系的定位元素 将父子元素变成兄弟元素

给父元素设置透明的背景图

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>透明</title>
<style>
img{
	position:absolute;
	}
.box{width:226px;height:300px;background:#ff0;position:absolute;
opacity:.1;/*半透明 ie9以下浏览器不识别 取值范围是0-1*/
filter:alpha(opacity=50);/*只有ie能识别 取值范围是0-100*/
}
</style>
</head>
<body>
<img src="images/w.png" />
<div class="box"></div>
</body>
</html>

知识点8.sticky粘连性定位

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>黏性定位</title>
<style>
*{margin:0;}
#header{height:100px;background:#0ff;}
#nav{height:60px;background:#0f0;
position:sticky;top:0px;/* 就是当nav距离顶部为0的时候，会随着浏览器一起滑动*/
}

#main{width:1000px;margin:0 auto;height:3000px;background:#f99;}

#footer{background:#ccc;height:100px;}
</style>
</head>
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="footer"></div>
</body>
</html>

锚点的应用9

是网页制作中超级链接的一种，在网页内部进行跳转。

	如果网页过长 用户想看到底下的部分必须拼命滚动滚轮或是拖动滚动条。那样会造成用户体验度不高,锚点就是为了避免这种情况而诞生的。

锚点语法：

案例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>锚点-商场</title>
<style>
*{margin:0;padding:0;}
div{height:20000px;}
a{text-decoration:none;background:#000;color:#fff;font:16px/2 "";text-align:center;width:32px;margin:1px 0;}
#box1{background:#f99;}
#box2{background:#99f;}
#box3{background:#9f9;}
#box4{background:#ff9;}
#box5{background:#9ff;}
#box6{background:#f9f;}
#box7{background:#f80;}
#box8{background:#333;}
p{position:fixed;right:10px;height:265px;top:0;bottom:0;margin:auto;}
p a{display:block;}
</style>
</head>
<body>
<p>
    <a href="#box1">F1</a>
    <a href="#box2">F2</a>
    <a href="#box3">F3</a>
    <a href="#box4">F4</a>
    <a href="#box5">F5</a>
    <a href="#box6">F6</a>
    <a href="#box7">F7</a>
    <a href="#box8">F8</a>
</p>
<div id="box1">赚女人钱</div>
<div id="box2">卖女装</div>
<div id="box3">卖女妆</div>
<div id="box4">卖童装</div>
<div id="box5">卖女装</div>
<div id="box6">卖男装</div>
<div id="box7">吃饭</div>
<div id="box8">看电影</div>
</body>
</html>

10图片的底部添加文字背景加上改透明度

简单的定位文字加透明，文字也透明了

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定位常见综合案例</title>
<style>
*{margin:0;padding:0;}
.box{width:300px;height:200px;border:1px solid #f00;position:relative;}
.box img{width:100%;height:100%;}
.box p{background:#000;color:#fff;font:16px/2 "";text-align:center;position:absolute;width:100%;left:0;bottom:0;
opacity:0.5;/* 透明 取值 0-1 0.5是半透明 */
}
</style>
</head>
<body>

<div class="box">
	<img src="images/w.png" /> 
    <p>我们选图片是有底线的。我就是底线！</p> 
</div>
slkjdlksajdlksajdlksajdsakljslkjdsalkjdlksajdlkajdlksajdlksajdlajdlksalkd

</body>
</html>

定位常见综合案例2-文字不透明1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定位常见综合案例2-文字不透明1</title>
<style>
*{margin:0;padding:0;}
.box{width:300px;height:200px;border:1px solid #f00;position:relative;}
.box img{width:100%;height:100%;}
.box p{background:url(images/000_50.png);color:#fff;font:16px/2 "";text-align:center;position:absolute;width:100%;left:0;bottom:0;

}
</style>
</head>
<body>

<div class="box">
	<img src="images/w.png" /> 
    <p>我们选图片是有底线的。我就是底线！</p> 
</div>
slkjdlksajdlksajdlksajdsakljslkjdsalkjdlksajdlkajdlksajdlksajdlajdlksalkd

</body>
</html>

定位常见综合案例2-文字不透明2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定位常见综合案例2-文字不透明2</title>
<style>
*{margin:0;padding:0;}
.box{width:300px;height:200px;border:1px solid #f00;position:relative;}
.box img{width:100%;height:100%;}
.box p{background:#000;color:#fff;height:32px;font:16px/2 "";text-align:center;position:absolute;width:100%;left:0;bottom:0;
opacity:0.5;/* 透明 取值 0-1 0.5是半透明 */
}
.box span{color:#fff;font:16px/2 "";text-align:center;position:absolute;width:100%;left:0;bottom:0;
}
</style>
</head>
<body>

<div class="box">
	<img src="images/w.png" /> 
    <p></p>
    <span>我们选图片是有底线的。我就是底线！</span>
</div>

</body>
</html>