CSS Positioning(定位)

CSS Positioning(定位)



position 属性指定了元素的定位类型。

position 属性的四个值:

  • static
  • relative
  • fixed
  • absolute

元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。


static 定位

HTML元素的默认值,即没有定位,元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right影响。


fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动:

实例

p.pos_fixed { position:fixed; top:30px; right:5px; }

Fixed定位使元素的位置与文档流无关,因此不占据空间。

Fixed定位的元素和其他元素重叠。


relative 定位

相对定位元素的定位是相对其正常位置。

实例

h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }

可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。

实例

h2.pos_top
{
position:relative;
top:-50px;
}

相对定位元素经常被用来作为绝对定位元素的容器块。


absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

实例

h2
{
position:absolute;
left:100px;
top:150px;
}

absolute 定位使元素的位置与文档流无关,因此不占据空间。

absolute 定位的元素和其他元素重叠。


重叠的元素

元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

一个元素可以有正数或负数的堆叠顺序:

实例

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

时间: 2024-10-06 00:28:17

CSS Positioning(定位)的相关文章

CSS Positioning(定位)与Float(浮动)

一.CSS Positioning(定位) 1.Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么.元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法.有四种不同的定位方法. 2.Static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中.静态定位的元素不会受到top, bottom, lef

CSS:CSS Positioning(定位)

ylbtech-CSS:CSS Positioning(定位) 1.返回顶部 1. CSS Positioning(定位) position 属性指定了元素的定位类型. position 属性的四个值: static relative fixed absolute 元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法. static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中. 静态定位

10步掌握CSS布局定位: position static relative absolute float

无意中看到此文,因作者强调其中避开了浏览器bug/分歧,所以个人认为值得借鉴. 不才仔细看了此文,自觉受益匪浅 ,屡试不爽,佩服作者对css布局的精炼总结,顺便小译了一段, 英文水平有限,且个人通常写写php,对css了解不深却有点兴趣,错误之处还请指正. 个人没有空间,代码中的css文件和js保留了完整路径:http://www.barelyfitz.com/screencast/html-training/css/positioning/ 原文地址:http://www.barelyfitz

CSS中定位机制的想法

对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | fixed 适用于:除 <' display '> 属性定义为「table-column-group | table-column」之外的所有元素. 继承性:无. 归类总结一下定位的四种属性特点: 绝对定位: 1:单独标签设置定位的时候,以浏览器左上角为基准设置定位的. 2:盒子嵌套的时候,如果父

css元素定位样式

曾经写网页,学css整体上不难,但就是元素定位,始终一知半解,直到今天,本着实践出真知的理念,经过认真测试,总结出了如下结论. css 定位: positionstatic : 默认静止定位,元素在正常的文档流中无法移动定位.absolute :独立元素,元素从文档流中脱离,会相对于父层(static定位的父层除外)移动定位.relative : 相对定位,相对本身的位置移动定位,效果等同于相对于父层移动定位.fixed: 固定定位,相对于窗口移动定位.注:1.移动定位是指通过 top,bott

《精通CSS》定位

定位部分包含了两个模型:视觉格式化模型和定位模型.理解这两个模型的细微差异是非常重要的,因为它们一起控制着如何在页面上布置每个元素. /**********视觉格式化模型***************/ p.h1.div等元素常常被称为块级元素,与此相反,strong和span等元素称为行内元素.块级元素显示为一块内容,即"块框",它们显示为一块内容.行内元素显示在一行上. display属性可以改变元素的显示类型,通过将display设置为block,可以让行内元素表现的像块级元素一

css的定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"

CSS Sprite定位实现

何为CSS Sprite 通常我们把它叫做CSS图像拼合技术,当然还有人把CSS Sprites叫做"CSS贴图定位". 原理 CSS Sprites 原理:其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","background- repeat","background-position"的组合进行背景定位,background-position可以用数字精确的定位出背景图

CSS 中定位的使用

position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) absolute 设置网页的为基准点左上角(绝对定位 以网页的左上角为基准点 不会暂居原来的位置) static 无设置left auto 以基准点定位在左边 像素/百分比 定位在左边top auto 以基准点定位在上边 像素/百分比 定位在上边right auto 以基准点定位在右边 像素/百分比 定位在右边bottom auto 以基准点定位在下边 像素/百分比 定位在下边z