今天小编跟大家讲解下有关css的三种定位方式使用探讨 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css的三种定位方式使用探讨 的相关资料，希望小伙伴们看了有所帮助。
css 3种类型定位方式 进行控制页面布局：普通定位 浮动定位 绝对定位。 默认使用普通流技术再页面中布局元素 希望表现与普通流不同 另外两个特性position和float 具体实例 复制代码代码如下: <html> <head> <title> css定位功能探索 </title> <style type="text/css"> #relative{ position: relative; top: -10px; left: 30px; color: red; } #absolute1{ position: absolute; top: 20px; left: 360px; color: blue; } #absolute2{ position: absolute; top: 50px; left: 360px; color: blue; } #absolute3{ position: absolute; top: 50px; left: 360px; color: blue; } #fixed{ position: fixed; top: 90px; left: 80px; } #float1{ float: left; margin-left: 50px; } #float2{ float: left; margin-left: 50px; } </style> </head> <body style='height: 1000px;'> <div> position 值为relative 定位探索1 </div> <div id='relative'> position 值为relative 定位探索2 </div> <div> position 值为absolute 定位探索3 </div> <div id='absolute1'> position 值为absolute 定位探索4 </div> <div style='margin-top: 50px;'> 这是position 值为absolute 定位探索4和5的父元素 <div id='absolute2'> position 值为absolute 定位探索4 </div> <div> position 值为absolute 定位探索5 </div> </div> <div style='margin-top: 50px;position: relative;'> 这是position 值为absolute 定位探索6和7的父元素 <div id='absolute3'> position 值为absolute 定位探索6 </div> <div> position 值为absolute 定位探索7 </div> </div> <div style='margin-top: 20px;'> 这是position值为fixed 定位探索1 </div> <div id='fixed'> 这是position值为fixed 定位探索2 </div> <div>这是一个普通定位1</div> <div style='border: 2px solid red;' id='float1'>这是float定位1</div> <div id='float2' style='border: 2px solid red;'>这是float定位2</div> <div>这是一个普通定位2</div> </body> </html> 运行效果：来源：爱蒂网
