选用CSS精准定位特性完成Html中DIV堆叠与飘浮

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

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

1般来讲,DIV沒有飘浮1说,更精确的应为堆叠或固定不动。最简易的方式是选用CSS精准定位特性。

1、DIV堆叠,即1个堆叠加在此外1个层上

运用相对性精准定位和肯定精准定位来完成:

在父目标上设定:position:relative; 在子目标上设定:position:absolute; top: 10px; left: 10px;

这样假如父目标里边有别的元素的话。上面设定的子目标便可以"飘浮"在父目标上面了。

2、元素固定不动在对话框的某个部位

应用固定不动精准定位:

在必须飘浮的元素上设定:position:fixed; top: 10px; left: 10px;

上1个固定不动精准定位的源代码:

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf⑻">
<title>CSS固定不动精准定位</title>
<style type="text/css">
body {
margin:0px auto;
}
#fixedLayer {
position:fixed;
left: 40px;
top: 10px;
width:100px;
line-height:30px;
background: #FC6;
border:1px solid #F90;
}
</style>
</head>
<body>
<div id="fixedLayer">固定不动没动</div>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
</body>
</html>

3、以body为父目标

假如不存在上述的父目标,则根据 body 目标。而其堆叠根据 z-index 特性界定,fixed :未适用。目标精准定位遵循肯定(absolute)方法。可是要遵循1些标准,relative :目标不能堆叠,但将根据 left, right , top , bottom 等特性在一切正常文本文档流中偏位部位。

表明:查找目标的精准定位方法。设定此特性值为 absolute 会将目标拖离出一切正常的文本文档流肯定精准定位而不考虑到它周边內容的合理布局。倘若别的具备不一样 z-index 特性的目标早已占有了给定的部位,她们之间不容易互相危害,而会在同1部位堆叠。此时目标不具备外补钉 margin ,但仍有内补钉 padding 和边框 border 。

要激活目标的肯定(absolute)精准定位,务必特定 left, right , top , bottom 特性中的最少1个,而且设定此特性值为 absolute 。不然上述特性会应用她们的默认设置值 auto ,这将致使目标遵循一切正常的HTML合理布局标准,在前1个目标以后马上被呈递。设定此特性值为 relative 会维持目标在一切正常的HTML流中,可是它的部位能够依据它的前1个目标开展偏位。在相对性(relative)精准定位目标以后的文字或目标占据她们自身的室内空间而不容易遮盖被精准定位目标的当然室内空间。与此不一样的,在肯定(absolute)精准定位目标以后的文字或目标在被精准定位目标被拖离一切正常文本文档流以前会占据它的当然室内空间。置放肯定(absolute)精准定位目标在可视性地区以外会致使翻转条出現。而置放相对性(relative)精准定位目标在可视性地区以外,翻转条不容易出現。內容的规格会依据合理布局明确目标的规格。

比如,设定1个 div 目标的 height 和 position 特性,则 div 目标的內容将决策它的宽度( width )。此特性针对 currentStyle 目标而言是写保护的。针对别的目标而言是可读写能力的。对应的脚本制作特点为 position 。