设计初学者会对布局中绝对定位和相对定位的区别，加上浮动后对定位的影响有些头疼。在这里，武汉梅清教育将分析很多XHT网页ML中相对定位和绝对定位的本质、用法、区别和联系。以及使用CSS左、右、上、下属性(偏移属性)和边距属性(外边距)定位块级元素的布局方法。
CSS中最常用的布局属性是Float(CSS Floating属性)和Position (CSS定位属性)。
01
位置:静态
这个很好理解。原则上，所有元素的默认定位是:position:static，这意味着元素没有被定位，而是出现在文档中它应该出现的位置。
一般来说，不需要指定位置:静态，除非要覆盖之前设置的定位。
#div-1 {
位置:静态；
}
02
位置:相对
位置:相对，相对定位是指元素实际上仍然占据着它在文档中的原始位置，但是在视觉上相对于它在文档中的原始位置移动了。设置位置:相对于一个元素可以使用上、下、左、右来移动该元素相对于它在文档中的位置。
#div-1 {
位置:相对；
top:20px；
左:-40px；
}
03
位置:绝对
位置:绝对，绝对定位，我们可以对比一下相对定位位置:相对从记忆中学习。
当position:absolute被指定时，我们可以理解为元素是从文档中分离出来的(即在文档中没有位置)，可以根据设置的上、下、左、右进行精确定位。
#div-1a {
位置:绝对；
top:0；
右:0；
宽度:200px
}
04
位置:相对+位置:绝对
如果我们为div-1设置相对定位，那么div-1中的所有元素都将相对于div-1定位。如果为div-1a设置了绝对定位，可以将div-1a移动到div-1的右上角。
#div-1 {
位置:相对；
}
#div-1a {
位置:绝对；
top:0；
右:0；
宽度:200px
}
05
两列的绝对定位
那么如果需要绝对定位两个元素该怎么办呢？其实很简单，我们可以先设定一个相对定位，然后对另外两个元素进行绝对定位。
#div-1 {
位置:相对；
}
#div-1a {
位置:绝对；
top:0；
右:0；
宽度:200px
}
#div-1b {
位置:绝对；
top:0；
左:0；
宽度:200px
}
06
两个立柱的绝对定位和高度确定
事实上，设置这个元素的固定高度并不适合大多数设计，因为我们通常不知道元素中会有多少文本或者要使用的确切字体大小。
#div-1 {
位置:相对；
高度:250px
}
#div-1a {
位置:绝对；
top:0；
右:0；
宽度:200px
}
#div-1b {
位置:绝对；
top:0；
左:0；
宽度:200px
}
07
浮
对于可变高度的列，上述绝对定位不起作用。我们可以浮动一个元素，使它向左/向右移动，文本包围它。这主要用于图像，但在这里我们将其用于复杂的布局任务(因为它是我们唯一的工具)。
#div-1a {
float:左；
宽度:200px
}
08
浮动柱
事实上，我们可以同时浮动两个元素，例如，两个元素同时向左浮动，此时，我们必须设置元素的宽度。
#div-1a {
float:左；
宽度:150像素；
}
#div-1b {
float:左；
宽度:150像素；
}
09
清除浮动列
如果我们在前面的元素中使用了floating，现在希望这个元素显示在正常位置而不受影响，那么我们可以清除floating(clear:both；)来正确定位其他元素。
#div-1a {
float:左；
宽度:190px
}
#div-1b {
float:左；
宽度:190px
}
#div-1c {
clear:两者都有；
}
就网页中元素的定位和浮动来说，其实这些代码很简单，关键是理解和灵活应用。如果您对网页设计感兴趣或有任何疑问，请拨打武汉梅清教育热线027-87685577，会有一位工作10年的前端大神详细解答您的疑问。
你可能会错过
1.《position属性 教程|网页前端:CSS定位属性Position详解》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《position属性 教程|网页前端:CSS定位属性Position详解》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/yule/1052694.html
