css的3种定位

1.固定定位(position:fixed;)

固定定位使用fixed属性,他会相对于整个文档定位,我们可以轻松的让一个元素定位在浏览器上,使元素在屏幕上保持固定,下拉滚动条,位置也不改变。

 注意:固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响.

2.相对定位(position:relative;)

如果想让一个元素在他本来的位置进行调整(位移),我们可以将该元素定位设置为relative,同时指定相对位移(利用top,bottom,left,right)。

注意:相对定位的元素仍然在文档流中,仍然占据着他本来占据的位置空间。

3.绝对定位(position:absolute;)

如果想让一个元素在文档制定位置,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口

注意:绝对定位会是元素从文档流中被删除,不占据空间。

  

时间: 2024-10-18 22:36:24

css的3种定位的相关文章

CSS的三种定位方式介绍(转载)

在CSS中一共有N种定位方式,其中,static ,relative,absolute三种方式是最基本最常用的三种定位方式.他们的基 本介绍如下. static默认定位方式relative相对定位,相对于原来的位置,但是原来的位置仍然保留absolute定位,相对于最近的非标准刘定位,原来的位置消失,被后边的位置所顶替 下面先演示相对定位的案例 [html] view plain copyprint? <!DOCTYPE html> <html> <head> <

CSS的五种定位方式

CSS中一共有五种定位: position:static:默认值 position:absolute:绝对定位 position:relative:相对对定位 position:fixed:固定定位 position:sticky:粘性定位 其中,粘性定位是CSS3新增加的 兼容性比较差 定位的作用: 在正常情况下,可以让一个元素覆盖在另外一个元素上面 可以移动一个元素的位置 可以固定某个容器在浏览器窗口的某个位置不动.(运用fixed属性) 可以做吸顶效果,比如百度新闻的导航(运用sticky

css中三种定位详细介绍

在前台进行页面位置编辑时,时常碰到页面部分标签位置错乱,因此研究了一下通过css进行定位标签的方法. 定位方式:是指如何确定某个标签在页面中的位置. 1.固定定位:始终相对于浏览器窗口进行定位 1 <html> 2 <head> 3 <title>定位方式-固定定位</title> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 body

css position 几种定位

绝对定位:position:absolute 绝对定位使元素的位置与文档流无关,因此不占据空间. 绝对定位的元素的位置相对于最近的已定位祖先元素(absoulte.relative),如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块. 因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素.可以通过设置 z-index 属性来控制这些框的堆放次序. 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块. 元素原先在正常文

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

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

CSS四种定位及应用

定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不开定位,特别是后面的js特效,天天和定位打交道.不要抵触它,反而要爱上它,它可以让我们工作更加轻松哦! 为什么要用定位? 那么定位,最长运用的场景再那里呢? 来看几幅图片,你一定会有感悟! 第一幅图, 小黄色块可以再图片上移动: 第二幅图, 左右箭头压住图片: 第三幅图, hot 再盒子外面多出一块

【原】谈谈css中关于元素定位的属性(positon&z-index)

position position主要是4种设定: static(默认)如果不设置,默认就是staitc元素.其实就是没有position设定,DOM流安排在哪里就是哪里.所有的相关于位置的设定均无效,意味着left, right, z-index等属性设置了也是白设. relative如果只是设置postion: relative; 和static并没有视觉上的区别,但是,一旦设定了,就指定了对应DOM元素"被定位"了,之后就可以设置一些诸如right,left之类的属性. abso

三种定位体系简介

框( box )布局影响因素之一,便是定位体系.定位体系也是其最为重要的影响因素. CSS2.1 中,一个框可以根据三种定位体系布局.CSS2.1 中的定位体系帮助作者使他们的文档更容易理解,并不需要使用标记的手段(如,不可见的图片)达到布局的效果. 常规流( Normal flow ) 常规流,是对 "normal flow" 的直译. 之称之为常规流,是因为这是相对于后面的浮动和绝对定位的一个概念,浮动和绝对定位元素都脱离了当前的常规流. 在 CSS2.1中,常规流包括块框( bl

(转)HTML&amp;CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是