如何在html5里添加定位

在HTML5中，我们可以使用CSS3的
position属性来对元素进行定位。
position属性有四个值：
static、
relative、
absolute和
fixed，下面我将详细介绍如何在HTML5中添加定位。,1、
static定位,static是元素的默认定位方式，元素按照正常的文档流进行排列。,2、
relative定位,relative定位是相对元素自身的正常位置进行偏移。,3、
absolute定位,absolute定位是相对于最近的非静态定位祖先元素进行偏移，如果没有非静态定位的祖先元素，则相对于初始包含块进行偏移。,
,<!DOCTYPE html> <html> <head> <style> .static { position: static; backgroundcolor: lightblue; padding: 20px; } </style> </head> <body> <div class=”static”>这是一个静态定位的元素。</div> <div style=”margintop: 50px;”>这是另一个元素。</div> </body> </html>,<!DOCTYPE html> <html> <head> <style> .relative { position: relative; backgroundcolor: lightgreen; padding: 20px; top: 20px; left: 20px; } </style> </head> <body> <div class=”relative”>这是一个相对定位的元素。</div> <div style=”margintop: 50px;”>这是另一个元素。</div> </body> </html>,<!DOCTYPE html> <html> <head> <style> .container { position: relative; width: 200px; height: 200px; backgroundcolor: lightyellow; } .absolute { position: absolute; backgroundcolor: lightcoral; padding: 20px; top: 20px; left: 20px; } </style> </head> <body> <div class=”container”> <div class=”absolute”>这是一个绝对定位的元素。</div> </div> <div style=”margintop: 50px;”>这是另一个元素。</div> <div style=”margintop: 100px;”>这是另一个元素。</div> <div style=”margintop: 150px;”>这是另一个元素。</div> <div style=”margintop: 200px;”>这是另一个元素。</div> <div style=”margintop: 250px;”>这是另一个元素。</div> <div style=”margintop: 300px;”>这是另一个元素。</div> <div style=”margintop: 350px;”>这是另一个元素。</div> <div style=”margintop: 400px;”>这是另一个元素。</div> <div style=”margintop: 450px;”>这是另一个元素。</div> <div style=”margintop: 500px;”>这是另一个元素。</div> <div style=”margintop: 550px;”>这是另一个元素。</div> <div style=”margintop: 600px;”>这是另一个元素。</div> <div style=”margintop: 650px;”>这是另一个元素。</div> <div style=”margintop: 700px;”>这是另一个元素。</div> <div style=”margintop: 750px;”>这是另一个元素。</div> <div style=”margintop: 800px;”>这是另一个元素。</div> <div style=”margintop: 850px;”>这是另一个元素。</div> <div style=”margintop: 900px;”>这是另一个元素。</div> <div style=”margintop: 950px;”>这是另一个元素。</div> <div style=”margintop: 1000px;”>这是另一个元素。</div> <div style=”margintop: 1050px;”>这是另一个元素。</div> <div style=”margintop: 1100px;”>这是另一个元素。</div> <div style=”margintop: 1150px;”>这是另一个元素。</div> <div style=”margintop: 1200px;”>这是另一个元素。</div> <div style=”margintop: 1250px;”>这是另一个元素。</div> <div style=”margintop: 1300px;”>这是另一个元素。</div> <div style=”margintop: 1350px;”>这是另一个元素。</div> <div style=”margintop: 1400px;”>这是另一个元素。</div> <div style=”margintop: 1450px;”>这是另一个元素。</div> <div style=”margintop: 1500px;”>这是另一个元素。</div> <div style=”margintop: 1550px;”>这是另一个元素。</div> <div style=”margintop: 1600px;”>这是另一个元素。</div> <div style=”margintop: 1650px;”>这是另一个元素。</div>,

如何在html5里添加定位

相关推荐

热门文章