元素定位信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》

前端技术开发知识储备绝对定位2相对定位3静态定位1固定定位4Z-index属性设置5

01静态定位前端技术开发

01元素定位元素定位position属性值描述static默认值。静态定位，元素在文档标准流中。relative相对定位。元素相对于其正常位置进行定位。absolute绝对定位。元素相对于static定位以外的第一个父元素进行定位。元素的位置通过“left”“top”“right”以及“bottom”属性进行规定。?xed固定定位。元素相对于浏览器窗口进行定位；元素的位置通过“left”“top”“right”及“bottom”属性进行规定。position属性的取值说明position:static|relative|absolute|?xed;

01静态定位元素静态定位语法： position:static;说明：当position属性取“static”值或是元素不设置position属性时，网页元素按照默认的显示方式，即按照文档标准流中的显示方式来显示。

02绝对定位前端技术开发

02绝对定位绝对定位的语法：position:absolute;绝对定位规则使用绝对定位的元素需要结合两个方向上的偏移属性进行位置的移动。水平方向通过left或right属性来指定，垂直方向通过top或bottom属性来指定。left:50px或是right:100px都表示它在水平方向上偏移的位置。在实际应用中只要选择一个使用即可。垂直方向类似。

02绝对定位绝对定位规则使用绝对定位的元素偏移的参考位置，即基准的位置是离它最近的已经定位的祖先元素。最近祖先元素已经定位设置position属性的元素，并且其值非static的任意一种方式。指“DOM”中，从自身节点开始往上直至根节点，所经过的所有节点都是它的祖先节点，其中的直接上级节点也叫父节点。从自身节点开始往上搜索使用了“已经定位”的元素，找到的第一个这样的元素它的左上角就是绝对定位的基准点。基准点设置为绝对定位之后，元素就会脱离文档流。

02绝对定位1.设置绝对定位的元素素会脱离文档流。2.按照设置水平方向和垂直方向上的偏移量进行移动。3.元素的宽度从原来父元素宽度的100%变为自适应内容大小。将第2个div元素设置绝对定位#second{ position:absolute; left:100px; top:50px;}绝对定位实例：该元素偏移的基准点是哪里？基准点是body元素

02绝对定位CSS代码：HTML代码：bodydivid=container divclass=child第1个层元素/div divclass=childid=second第2个层元素/div divclass=child第3个层元素/div /div/bodydiv{ border:1pxsolid#000;}#container{ position:absolute; width:800px; margin:150px; padding:20px;}.child{ background:#0cf; padding:20px;}#second{ position:absolute; left:100px; top:50px;}#second元素偏移的基准点是#container元素相同的偏移量，不同的基准点。

03相对定位前端技术开发

03相对定位相对定位语法：position:relative;使用相对定位的元素，会相对于它原来的位置，通过偏移指定的距离到达新的位置。使用相对定位的元素需要结合两个方向上的偏移属性进行位置的移动。使用相对定位的元素仍在标准流中，且对父元素和相邻元素没有任何影响。相对定位规则

03相对定位divid=container divclass=child第1个层元素/div divclass=childid=second第2个层元素/div divclass=child第3个层元素/div /divdiv{ border:1pxsolid#000;}#container{ width:800px; margin:50px; padding:20px;}.child{ background:#0cf; padding:20px;}#second{ position:relative; left:100px; top:50px;}CSS代码：HTML代码：网页效果：以原本位置左上角为基准点

04固定定位前端技术开发

04固定定位固定定位语法：position: