9 定位

Posted zhujing666

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了9 定位相关的知识，希望对你有一定的参考价值。

#1 相对定位

以原来的位置为参考点

<!DOCTYPE html>
<html>
<head>
	<title>定位</title>
	<style type="text/css">
		body{
			border: 1px solid orange;
		}
		div{
			width: 200px;
			height: 200px;
			color:#fff;
		}
		div.one{
			background-color: red;
			position: relative;
			top: 30px;
			left: 100px;
		}
		div.two{
			background-color: green;
			position: relative;
			top: 100px;
		}
		div.three{
			background-color: blue;
		}
	</style>
</head>
<body>
	<!-- position: static
		    1 相对定位 position: relative;
		        不脱离标准文档流，可以调整元素；
		        以原来的位置为参考点
		    2 绝对定位 position: absolute;

　　　　　　　　　　　　　　脱离标准文档流；
　　　　　　　　　　　　　　不在页面上占位置；
　　　　　　　　　　　　　　压盖现象
　　　　　　　　　　　　　　根元素页面左上角为参考点
　　　　　　　　　　　　　　(子元素绝对定位
　　　　　　　　　　　　　　父元素相对定位)

		    3 固定定位 position: fixed;


	 -->
	 <div class="one">one</div>
	 <div class="two">two</div>
	 <div class="three">three</div>

</body>
</html>

#2 绝对定位

层级提高； positon: absolute;

#  小米搜索栏

 

　　

以上是关于9 定位的主要内容，如果未能解决你的问题，请参考以下文章

超级有用的9个PHP代码片段

VSCode自定义代码片段9——JS中的面向对象编程

Selenium Xpath元素无法定位 NoSuchElementException: Message: no such element: Unable to locate element(代码片段

;~ 小部分AutoHotkey源代码片段测试模板2019年10月9日.ahk

css常用代码片段 (更新中)

分析定位占用CPU资源高的JVM线程