教程集 www.jiaochengji.com
教程集 >  CSS教程  >  经典实例  >  正文 css入门教程:CSS Position 教程

css入门教程:CSS Position 教程

发布时间:2020-05-17   编辑:jiaochengji.com
教程集为您提供css入门教程:CSS Position 教程等资源,欢迎您收藏本站,我们将为您提供最新的css入门教程:CSS Position 教程资源
CSS Position 的作用是用来定位div 等容器的position: relative; 相对或position: absolute; 绝对位置的.

随着知识的CSS定位,你将能够操纵的确切位置的HTML元素。设计,以前需要使用JavaScript或HTML图片地图现在可以这样做完全是在CSS 。它不仅是容易的代码,但它也加载更快!

相对位置
相对定位变化的立场HTML元素相对的地方通常会出现。如果我们有一个标题,出现在我们上方的网页,我们可以使用相对定位,将它移到有点权,并减少了几个像素。下面就是一个例子。

h3 {
position: relative;
top: 15px;
left: 150px;
}
p {
position: relative;
left: -10px;
}

您可能注意到,您确定了四种可能的方向(左,右,上,下)只用两个(左边和顶部) 。这里有一个快速移动时参考HTML元素在CSS 。

向左移动-使用负值离开。
向右移动-使用一种积极的价值了。
向上移动-使用负值顶端。
下移-使用一种积极的价值最高。

绝对位置
绝对定位,你定义的确切像素值在指定的HTML元素就会出现。起点是最左边的浏览器的可视面积,因此请务必衡量你是从这一点。

注意:火狐目前没有解释绝对正确的定位。但是这两个6.0 和Opera 8.0 做。

h3 {
position: absolute;
top: 50px;
left: 45px;
}
p{
position: absolute;
top: 75px;
left: 75px;
}
好了教程就OK了.

您可能感兴趣的文章:
CSS List 入门教程
css入门教程:CSS Position 教程
jQuery 文本框模拟下拉列表效果
jQuery 使用手册(三)
jQuery slider Content(左右控制移动)
利用jQuery实现可输入搜索文字的下拉框
jquery 图片轮换效果
使用jquery获取css的top和left属性
彻底弄懂CSS盒子模式之三
CSS初级入门:样式表的外部调用

[关闭]
~ ~