CSS定位二:空间定位

css

在这一节里,我们来看一个利用z-index定位的例子,这个例子的效果在这里
  我们看到例子中的两幅图片和一段文字分别处于不同的空间位置,文字覆盖在那朵花的图片上,而挥动小旗的小老鼠却又覆盖在文字的上面。那么这种效果是怎样实现的呢?这里利用了CSS定位的z-index属性,代码如下:
  <html>
    <head>
    <title>zindex</title>
    <style type=“text/css”>
    <!--                   
    .pile{position:absolute;left:2in;top:2in;
    width:3in;height:3in;}//*定义了类pile,以及它的位置*//
    .pile1{position:absolute;left:3in;top:2in;
    width:1in;height:1in;} //*定义了类pile1,以及它的位置*//
    -->
    </style>
    </head>
    <body>
    <img src="/UploadPic/2007-4/200741181926273.jpg"” class=“pile” id=“image”
     style=“z-index:1”>
     //*导入一张图片,使它为pile类,z-index属性定义为1,位置处于最下方
      *//
    <div class=“pile” id=“text1”
    style=“color:#ffff33;z-index:2” > 这段文字将覆盖在图片上。
    </div>//*定义一段文字的颜色和z-index属性为2,处于中间位置*//
    <img src="/UploadPic/2007-4/200741181927569.gif"” class=“pile1” id=“image”
    style=“z-index:3”>
     //*导入第二张图片,使它为“pile1”类,z-index属性为3,位置处于最上
      方*//
    </body>
  </html>

  通过这两节的例子,我们可以看到CSS定位具有强大的功能,至于其他的一些定位属性,您可以自己尝试一下,很简单的。
  利用好了CSS的定位功能,会使您的页面更加精致,更加富有动感。
  下一章我将带您进入CSS滤镜的精彩世界

时间: 2024-09-17 04:49:23

CSS定位二:空间定位的相关文章

CSS定位:几种类型的position定位的元素

文章简介:定位属性看起来好像很好理解,但它的运作与它在表面所看到的有点儿不一样.你可能会觉得的是相对定位更加类似绝对定位.当在做布局设计的时候你通常会想使用浮动并在指定的元素上应用定位来打破布局. 当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来说,有一些东西会绊倒新手,所以在它成为你的惯用技巧前你需要掌握它们. 一旦你更深入地了解了它是怎么运作

详解CSS定位的应用及注意事项

在讲解CSS定位前,首先要搞清楚以下几个属性的真正含义和区别,如下: [ position:relative | absolute | static | fixed ] A:相对定位(position: relative):如果对某一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直(或水平)位置(top,right,bottom,left四值),让这个元素"相对于"它的起点进行移动.注:设置为相对定位的元素框会偏移某个距离.元素仍然保持其未定位前的形状,它原本所占的

css定位页面

CSS的4大核心基石:盒子模型.标准流.浮动.定位.只有把这些核心基础掌握到烂熟于胸的程度,才能游刃有余地进行设计. colorandy读者提出这样一个关于页面布局的问题: "如果有一个footer层,我想让他固定出现在整个页面的最下方,不随着页面中的内容而变化,CSS中要怎样设?比如里面是一些版权信息.因为我整页的内容比较少,footer老跟着内容跑到上面去,很不美观." 这个问题如果在以前使用表格布局,并不困难,只要给页面的最外层表格高度设置为100%就可以了,然而,在Web标准的

CSS定位组件CSS 定位方式

css 在HTML中并无法直接定义要显示的文字或图文件在画面的那个位置...  只能一顺序来显示...  但是CSS提供3个新的性质运用..  top,left,position...  left相当于x轴,top相当于y轴,position则是绝对(abslute)或者相对(relative)位置..  举个例子:  <html>  <head>  <meta content="text/html; charset=big5" http-equiv=Co

详细讲解CSS定位与定位应用

css 定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义: 在CSS中关于定位的内容是:position:relative | absolute | static | fixed static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级.relative 不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通

CSS定位一:动态转换

css|动态|转换 通过在CSS中设置属性,我们可以准确的定义一个页面的样式,如颜色.字体.边框等.现在我们要讲的CSS定位主要是在页面的布局和控制上进行定义,使您的页面从这两个方面都展现的非常完美,更加富有动感. 另外,在讲解之前,我们首先介绍两个定义:相对定位和绝对定位.相对定位就是允许在文档的原始位置上进行偏移.而绝对定位则允许任意定位. 实现CSS的定位最终还是要靠属性.我们来看一下定位属性的详细列表(见下图): 我们在下面举一个例子,其中带了一点Script的内容,我们来看看它是如何实

Dreamweaver教程-CSS定位(positon)教程

 DIV+CSS网页布局中必不可少的就是定位,这一节的知识要和CSS盒子模型知识点结果起来理解. 1.相对定位(relative) 相对定位是指相对它本来应该处的位置所做的移动. -- <style type="text/css"> .dingwei{ position:relative; left:50px; } </style> -- <p>我是一段正常的文本</p> <p class="dingwei"&g

css实现二列宽度自适应实例

从二列固定宽度入手,开始尝试二列布局的情况下,左右栏宽度能够做到自适应,从一列自适应布局中我们知道,设定自适应主要通过宽度的百分比值设置,因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计,继续上面的CSS代码,我们得新定义二列的宽度值:  代码如下 复制代码 #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 20%; } #right { bac

Dreamweaver MX 2004 CSS定位属性

css|dreamweaver 八.定义 CSS 样式定位属性 "定位"样式属性使用"层"首选参数中定义层的默认标签,将标签或所选文本块更改为新层. 设置层定位属性:在"CSS 样式定义"对话框中,选择"定位"(如下图),然后设置所需的样式属性. (图片较大 请放大后查看) 如果不设置属性可以保持为空. 类型:确定浏览器应如何来定位层. 绝对:使用"定位"框中输入的坐标(相对于页面左上角)来放置层. 相对: