css 定位连线-ag凯发k8国际

css position(定位)

css position属性用来指定元素如何在页面上定位，css position(定位)的方式有以下几种：静态定位(static)，绝对定位(absolute)，相对定位(relative)，固定定位(fixed)。

css定位方法

在网页上适当定位元素对于良好的布局设计是必要的。css中有几种方法可用于定位元素。下一节将逐一介绍这些定位方法。

静态定位(static)

始终根据页面的正常流程来定位静态定位的元素。html元素默认情况下处于静态位置。静态定位的元素不影响由top，bottom，left，right，和z-index特性。

如果没有指定元素的position属性值，也就是默认情况下，元素是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。

说白了，平常我们根本就用不到“position:static”，不过有时候我们使用javascript来控制元素定位的时候，如果想要使得其他定位方式的元素变成静态定位，就要使用“position:static;”来实现。

示例.box {

padding: 20px;

background: #7dc765;

}测试看看‹/›

相对定位(relative)

相对定位的元素相对于其正常位置进行定位。

在相对定位方案中，元素的框位置是根据正常流计算的。然后根据属性- top或bottom和/或left或将框从该正常位置移开right。

示例.box {

position: relative;

left: 100px;

}测试看看‹/›

注意：相对定位的元素可以移动并与其他元素重叠，但是在正常流程中会保留最初为其保留的空间。

绝对定位(absolute)

绝对定位的元素相对于具有非静态位置的第一个父元素定位。如果找不到此类元素，则将其放置在相对于浏览器窗口“左上角”的页面上。框的偏移进一步可使用的属性的一个或多个指定top，right，bottom，和left。

绝对定位的元素将完全从正常流中移出，因此在放置同级元素时不会占用空间。但是，取决于z-index属性值，它可以与其他元素重叠。此外，绝对定位的元素可以具有margin，并且它们不会与其他任何margin一起折叠。

示例.box {

position: absolute;

top: 200px;

left: 100px;

}测试看看‹/›

固定定位(fixed)

固定定位是绝对定位的子类别。

唯一的区别是，固定定位的元素相对于浏览器的视口是固定的，并且在滚动时不会移动。

示例.box {

position: fixed;

top: 200px;

left: 100px;

}测试看看‹/›

注意：在打印介质类型的情况下，固定放置的元素会在每个页面上呈现，并且相对于页面框是固定的(即使在打印预览中)。ie7和ie8仅在指定a的情况下支持固定值。

与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是ag凯发k8国际为你收集整理的css 定位连线_css position(定位)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。