css相对性精准定位应用示例

日期:2021-01-20 类型:科技新闻 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

1.基础定义:

说白了,此种精准定位是相对性某1个目标开展的偏位,相对性精准定位其实不能使目标摆脱文本文档流,虽然它的部位将会造成偏位,可是目标原始部位依然会被保存。
假如要真实把握此种精准定位方法,弄清楚需相对哪一个目标开展偏位是重要点。

2.怎样将1个元素设定为相对性精准定位:

当1个目标的position特性值被设定为relative的情况下就会产生相对性精准定位:

拷贝编码
编码以下:

position:relative

3.精准定位参照目标:

可使用top特性和left特性设定相对性精准定位目标的偏位量。
相对性精准定位的偏位参照目标是此目标自身。

编码案例:
最先看1个沒有应用精准定位的编码案例:

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf⑻">
<meta name="author" content="" />
<title>CSS相对性精准定位-蚂蚁部落</title>
<style type="text/css">
.father{
width:400px;
height:400px;
background-color:green;
margin:50px;
}
.first{
width:100px;
height:100px;
background-color:red
}
.second{
width:100px;
height:100px;
background-color:blue
}
</style>
</head>
<body>
<div class="father">
<div class="first"></div>
<div class="second"></div>
</div>
</body>
</html>

在以上编码中,全部的目标都沒有选用相对性精准定位,这里不必多详细介绍了。

再看来1段选用相对性精准定位的编码:

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf⑻">
<meta name="author" content="" />
<title>CSS相对性精准定位</title>
<style type="text/css">
.father{
width:400px;
height:400px;
background-color:green;
margin:50px;
}
.first{
width:100px;
height:100px;
background-color:red;
position:relative;
left:20px;
top:30px;
}
.second{
width:100px;
height:100px;
background-color:blue
}
</style>
</head>
<body>
<div class="father">
<div class="first"></div>
<div class="second"></div>
</div>
</body>
</html>

在以上编码中,first元素选用了相对性精准定位,并造成偏位,偏位是以目标沒有造成偏位前的部位为参照的。另外还可以看出,first元素的偏位前的部位仍然会被保存,它附近的元素不可以够占有。
非常表明:精准定位元素常常与z-index特性1起应用