css中相对与绝对定位

定位在现今的页面当中是比较常见的,比如说一些固定在左右的广告之类的。

而我们在编写代码的时候,系统会默认我们的代码为静态定位

相对定位
  被看作普通流定位模型的一部分,定位元素的位置根据元素本身开始的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。

代码书写为,在css样式中添加。

position:relative;
 下面写上要这个元素上下左右移动的像素距离。

绝对定位
  相对于元素的上级或祖先元素进行定位,如果说元素的祖先元素当中,没有定位过的,那么此元素的定位位置就会相对于最初的包含块(body)进行移动。绝对定位的框可以从它的包含块向上、右、下、左移动。

相对定位和绝对定位的框都会让元素脱离普通流,所以都能覆盖页面上的其他元素,这个时候就可以通过设置z-index属性来控制框的堆放次序或者叫优先显示次序。

代码书写为,在css样式中添加。

position:absolute;
 下面写上要这个元素上下左右移动的像素距离。

时间: 2024-11-06 03:31:02

css中相对与绝对定位的相关文章

css 中相对定位和绝对定位

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

css中图片使用绝对定位实现居中效果[第二篇]

昨天在知乎上各种看前端的贴,一不小心又学到了个技巧,再次我搬过来和大家分享. 还是同样的问题: 如何让一个div在父元素中居中? 在上一篇里我们用到了绝对定位position:absolute; 再结合margin的负值实现了居中的效果. 第二种解决办法 在此我们来看下新的方法: html: <div class="container"> <div class="box"></div> </div> css: .con

css中图片使用绝对定位实现居中效果

存在问题 问题如标题所说,咱们在给图片设置绝对定位的时候就会遇到无法居中图片的问题.怎么解决?margin:0 auto? 很显然这个时候设置margin是无效的. 解决方案 假设咱们的图片宽度为100px:那我们就这么写: position:absolute; left:50%; margin-left:-50px; (此处margin-left的值写该图片宽度的一半) 解释: 1.使用绝对定位,设置left值将图片移到正中间,此时图片的左边框在屏幕的中线位置 2.设置margin-left,

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

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

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

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

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

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

深入理解CSS中的层叠上下文和层叠顺序(转)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时

深入理解CSS中的margin

1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准之中,jquery中有相对应的方法 margin与可视尺寸 1.1使用那个与没有设定width/height的普通block水平元素 2.2只适用于水平方向尺寸 <body style="background-color:#1a2b3c"> <div style=&quo

深入理解CSS中的层叠上下文和层叠顺序

零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了.例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的.那对于CSS世界中的元素而言,所谓的“冲突”指什