css元素定位

css元素定位

1. position:static|无定位


position:static是所有元素定位的认值,一般不用注明,除非有需要取消继承的别的定位

example:
#div-1 {
position:static;
}

2. position:relative|相对定位

使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置。
如果要让div-1层向下移动20px,左移40px:

example:
#div-1 {
position:relative;
top:20px;
left:40px;
}

如果用到相对定位,紧随他的层divafter是不会出现在div-1的下方,而是和div-1在同一个高度出现。

可见, position:relative;并不是很好用。

3. position:absolute|绝对定位


使用position:absolute;,能够很准确的将元素移动到你想要的位置,让我将 div-1a 移动到页面的右上角:

example:
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

使用绝对定位的div-1a层前面的或者后面的层会认为这个层并不存在,丝毫不影响到他们。所以position:absolute;用于将一个元素放到固定的位置很好用,但是如果需要div-1a层相对于附近的层来确定位置就不要实现了。
*这里有个Win IE的bug需要提到,就是如果为绝对定位的元素定义一个相对的度,那么在IE下它的宽度取决于父元素的宽度而不是整个页面的宽度。

4. position:relative + position:absolute|绝对定位+相对定位


如果给父元素(div-1)定义为position:relative;子元素(div-1a)定义为position:absolute,那么子元素(div-1a)的位置将相对于父元素(div-1),而不是整个页面
让div-1a定位于div-1的右上角:

example:

this is div-1a element.

this is div-1 element.

#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

5. two column layout|两列布局


让我们实践position:relative + position:absolute的理论,实现两列布局。

example:



#div-1 {
position:relative;/*父元素相对定位*/
}
#div-1a {
position:absolute;/*子元素绝对定位*/
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;/*子元素绝对定位*/
top:0;
left:0;
width:200px;
}

注意,在这个例子中会发现父元素的高度不会随着子元素的告诉变化,所以如果父元素的背景和边框需要定义一个足够高的高度才能显示出来。

6.float|浮动对齐


使用float定位一个元素有float:left;&float:right;两种值。这种定位只能在水平坐标定位,不能在垂直坐标定位。而且让下面的元素浮动环绕在它的左边或者右边。

example:
#div-1a {
float:left;
width:200px;
}

7.make two clumn with float|浮动实现两列布局

如果让一个元素float:left;另一个float:right;控制好他们的宽度,就能实现两列的布局效果

example:
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}

8.clear float|清除浮动


如果你不想让使用了float元素的下面的元素浮动环绕在它的周围,那么你就使用clear,clear有三个值,clear:left;(清除左浮动),clear:right;(清除右浮动),clear:both;(清除所有浮动)。

example:



#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}

至此,这个css的定位部分就结束了,你可以动手体会体会加深印象

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


CSS雪碧图是一种将多个小图合并成一张大图的优化技术,能够减少请求次数,提升页面性能。但是,我们在使用雪碧图时,可能还需要为其中的某一个小图添加超链接。这该怎么实现呢?下面我们来介绍一下。
今天我来介绍一下如何使用CSS来实现图片上下移动位置的效果。 首先,我们需要在HTML中添加一个图片元素,并给它一个唯一的ID。比如:
CSS中,我们可以利用transition属性来为元素添加动画效果。与这个属性相关的其他属性包括transition-delay、transition-duration、transition-property和transition-timing-function。在这篇文章中,我们将聚焦于t
CSS中如何让li居中对齐 在Web开发中,经常需要用到无序列表(ul)来呈现一些内容,但是默认情况下,这些li元素是左对齐的。那么,如何让li元素居中对齐呢?下面是一些实用的CSS技巧。
CSS是一种用来控制网页样式的语言,它可以用来控制页面元素的位置、大小和颜色等,其中有一种很重要的功能就是对齐方式的控制。下面我们来看看具体如何使用CSS来对齐页面元素。
CSS中的图片等比例缩放是网页设计中常用的技巧之一,因为这样可以让图片在不改变其宽高比的情况下适应不同的屏幕尺寸。以下是实现图片等比例缩放的方法:
CSS是一门非常重要的网页设计语言,可以控制网页的布局、颜色、字体等各种属性。有时候我们可能需要在网页中不加颜色的字体,这时候就需要用到一些技巧来达到这个目的。
CSS3是一项新的技术,可以为我们的网站添加许多惊艳的动画和效果。其中一种常用的效果是3D旋转效果图,它可以使图片和文字在页面中呈现出立体效果。
在CSS中,我们可以通过一些技巧来实现图片一帧帧播放的效果。最关键的是利用CSS的animation属性,通过关键帧动画来实现。
CSS是一个用于控制网页外观的语言。CSS不仅可以设置元素的样式,还可以将多个元素组合起来并共享样式。其中,最常用的组合方式就是同时使用两个或更多类。
CSS是网页设计中非常重要的一部分,它可以为网页元素设置各种样式,其中我们经常需要为边框设置样式。下面我们来看一下如何使用CSS为边框设定样式。
CSS渐变是Web设计中经常使用的一种技术,它可以让网页元素颜色从一个颜色到另一个颜色平滑过度。从右到左的渐变效果也十分常见,接下来我们就来介绍一下如何实现这样的效果。
CSS提供了许多方式来美化我们的网页,其中一种就是在图片上加入蒙层。这种效果可以让图片更有层次感,更具有视觉冲击力。下面我们来看一下如何使用CSS在图片上添加蒙层。
CSS是网页设计中重要的一部分,它可以让网页更加美观和具有吸引力。其中,图片上加蒙板是一种常见的设计方式。
CSS图片上下翻转动画是一种常见的网页动画效果,可以提高网页的视觉吸引力。下面介绍一种简单的CSS实现方式。
CSS(层叠样式表)是网页设计中必不可少的一部分,它通过控制HTML元素的样式来美化网页排版。而与CSS相关的最重要的任务之一就是与浏览器建立关系,以确保网页能够顺利地在不同的浏览器上正常显示。
在进行网页设计时,经常会涉及到在图片上放置图片的需求。在这种情况下,就需要使用CSS技术来实现。然而,在实际操作中,有时候会发现放置的图片并不能正常显示,这就需要我们仔细检查代码,找出问题所在。
在网页设计中,css是一种十分重要的样式语言。其中,设置段落间距也是css中常见的一种样式操作。一般来说,我们可以通过margin和padding属性来实现这一功能。
CSS 图片三角形是一种非常有用的技巧,它可以通过纯CSS代码实现。这是Web设计和开发必不可少的技能之一,因为它可以使页面更加具有吸引力和美观。
在网页设计中,常常会用到在图片上添加另一张图片的效果。然而,有时候我们会遇到这样的问题:我们的浏览器看到了HTML代码中的标签,但是图片却没有显示出来。这种情况的解决方法就是注意CSS代码的书写。