泉州浮桥网页设计培训-DHTML CSS Positioning (CSS-P)

泉州浮桥网页设计培训-DHTML CSS Positioning (CSS-P)

CSS 用于为 HTML 元素添加样式。
实例
注释:大多数 DHTML 实例需要IE 4.0+、Netscape 7+ 或者 Opera 7+!
position:relative

如何相对于元素的正常位置来定位这个元素。
position:relative

如何相对其正常位置来定位所有的标题。
position:absolute

如何使用一个绝对值来定义一个元素。
您可以在页面下方找到更多的例子。

哪些属性可与 CSS-P 一同使用?
首先,此元素必须指定 position 属性(relative 或 absolute)。
然后,我就可以设置下列 CSS-P 属性了:
left – 元素的左侧位置
top – 元素的顶端位置
visibility – 指定元素应当可见还是隐藏
z-index – 元素的堆叠次序
clip – 元素裁剪
overflow – 如何处理溢出的内容
Position
CSS 的 position 属性允许您控制文档中某个元素的定位。
position:relative
position:relative 属性可向对于一个元素的当前位置来定位此元素。
下面的例子把这个 div 元素定位到距离其正常位置右方 10 像素的位置:
div
{
position:relative;
left:10;
}
position:absolute
position:absolute 属性根据距离窗口的 margin 来定位一个元素。
下面的例子把这个 div 元素定位到距离其包含块左侧 margin 的右方 10 像素的位置:
div
{
position:absolute;
left:10;
}
Visibility
visibility 属性可决定一个元素是否可见。
visibility:visible
visibility:visible 属性可使元素可见。
h1
{
visibility:visible;
}
visibility:hidden
visibility:hidden 属性可使元素不可见。
h1
{
visibility:hidden;
}
Z-index
z-index 属性用于把一个元素放置于另一个元素之后。z-index 的默认值是 0。值越高,其优先权也越高。z-index: -1 更低的优先权。
h1
{
z-index:1;
}

h2
{
z-index:2;
}
在上面的例子中,如果 h1 和 h2 彼此叠加,则 h2 元素会位于 h1 的上面。

发表评论

电子邮件地址不会被公开。 必填项已用*标注