利用绝对定位和相对定位对CSS中区块进行位置调整

首先,我们需要明白相对定位和绝对定位的含义。

相对定位:就是设置一个参照物,其他元素或者区块相对于这个参照物进行偏移,而设置为相对定位的元素就是这个参照物。

绝对定位:绝对定位的偏移位置是相对于他的设置为相对定位的上级或者上上级,若这些都没有设置定位,则相对于BODY进行偏移,绝对定位不占位置。

以下是利用相对定位和绝对定位实现区块的位置调整,效果图如下:

代码如下:

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        .div1{            position: relative;             width: 150px;            height: 150px;            border: 1px solid ;

           }        .div2{position:absolute;            top: 25px;            left: 25px;

            width: 100px;            height: 100px;            border: 1px solid red;

        }        .div3{position:absolute;            top: 25px;            left: 25px;

            width: 50px;            height: 50px;            border: 1px solid green;

        }    </style></head><body><div class="div1" >

<div class="div2">    <div class="div3">

    </div></div>

</div></body></html>
时间: 2024-12-25 03:22:48

利用绝对定位和相对定位对CSS中区块进行位置调整的相关文章

css 中相对定位和绝对定位

1. css中定位机制有三种: 标准文档流, 浮动, 绝对定位 2. 绝对定位就属于第三种定位, 用到position属性, 下面就是具体设置 相对定位: 相对于自身原有位置(就是普通流的时候)进行偏移(设置top, left...后) 仍然处于标准文档流中 随即拥有偏移属性和z-index属性 绝对定位: 建立了以包含块为基准的定位 完全脱离了标准文档流 随即拥有偏移属性和z-index属性 3.  先上示例代码 1 <!DOCTYPE html> 2 <html lang="

辛星和你彻底搞清CSS中的相对定位和绝对定位

前面我在解读CSS中也说过了关于相对定位和绝对定位的问题,无奈还是有些童鞋表示迷茫,于是另开一篇博客,来详细解读相对定位和绝对定位,希望能够以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为相对定位的元素会偏移某个距离,元素仍然保持原来的样式,它会保留该HTML元素的空间,比如我们看如下代码: .demo{ position: relative; width:50px; height: 50px; left:50px; } 它会出现在相对原来的地方向右50px的地方,而它原来所在的地方

css中的几种控制页面布局的定位机制(相对定位与绝对定位)

  CSS中几种控制页面布局的定位机制 对于web的初学者来说,CSS中的几种定位方式经常让人摸不着头脑,从而达不到想要的页面布局效果,趁有时间就好好总结一下CSS中的几种定位方式,也当自己再巩固一下. CSS中包含三种控制页面布局的定位机制:普通流.相对定位.绝对定位.在CSS中通过position属性表明定位机制.此外还可以使用float属性来让元素浮动 普通流 相应语法(默认) position:static; 所谓的普通流就是根据块级元素以及内联元素自身的属性来进行布局,而不人为的进行控

css中的绝对定位与相对定位

1.绝对定位 元素没有设定position属性,但依旧具有position属性,其值为static 绝对定位的元素从文档流中删除,并相对于其最近的position属性为absolute.relative.fixed的祖先元素定位,若没有这样的祖先元素,则根据浏览器定位,元素原来在文档流中的控件被关闭,其层叠通过z-index属性决定,此时对象不具有边距(margin) <div class="content"> <div class="redBlock&qu

css中的相对定位与绝对定位的区别

1.绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body). 绝对定位与文档流无关,所以它们可以覆盖页面上其他的元素,可以通过z-index属性来控制这些层的对方顺序. 2.相对定位 position: relative;相对定位:相对定位是相对于元素在文档中的初始位置: 注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来

【转载】CSS之绝对定位及相对定位

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixed:对象脱离正常文档

css绝对定位、相对定位和文档流的那些事

前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是个事,所以今天特地探索了下css+div的绝对定位和相对定位和文档流的关系. 文档流的概念 确切的说应该是文档文档流模型的机制,html的布局机制就是用文档流模型的,即块元素(block)独占一行,内联元素(inline).不独占一行 如块级元素(block) <div>div1</div&

(转)css绝对定位、相对定位和文档流的那些事

原文链接:http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html 前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是个事,所以今天特地探索了下css+div的绝对定位和相对定位和文档流的关系. 文档流的概念 确切的说应该是文档文档流模型的机制,html的布局机制就是用文档流模型的,

【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距组成. 2.如果在元素上添加背景,则背景是边框, 内边距和内容组成的区域. 3.在css中width和height指的是内容区域的宽度和高度.增加内边距,边框和外边距不会影响内容区域的尺寸,但会增加元素框的总尺寸.即width=element 注意:ie的盒模型中,width指的是内容,内边距,和边