文档下载 文档下载导航
设为首页 | 加入收藏
搜索 请输入内容:  
 导航当前位置: 文档下载 > 所有分类 > 高等教育 > 理学 > div中的相对定位与绝对定位
侵权投诉

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

div中的相对定位与绝对定位(转) 这一段时间打算完全用CSS的DIV编写一个页面,做了两天思绪就有点乱了。

有的时候把某一个问题单独抽出来看感觉很简单。而复合起来就难的多,各种各样的问题就来了。 程序中最讨厌的就是找BUG了。思路前后衔接不上,捋不清头绪,看的头都大了。

家里有两个高手,不过却很少问。就像我的东西一定要从头到尾由我经手来做,那才是我的东西。呵呵~

****************************************

学习笔记:呵呵~~这次的笔记比较多

定位标签:position

包含的属性:relative(相对)与 absolute(绝对)

1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上。然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动。(再一点,相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框) 例如:#mybox{

position:relative;

left:20px;

top:20px;

}

效果就是使这个层向下和向左移动了20px。

2.position:absolute; 表示绝对定位,位置将依据浏览器左上角的0点开始计算,

绝对定位使元素与文档流无关,因此不占据空间。普通文档流中其这元素的布局就像绝对定位的元素不存在时一样。它相对于最近的已定位的祖先元素。如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。根据用户代理的不同,最初的包含块可能是画布事HTML元素。(因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制这些框的堆放次序。z-index的值越高,框在堆中的位置就越高。)

那么有个问题产生了,现在大家做的网页大部分是居中的,那么我需要这个元素跟着网页

中的某个元素位置不论分辨率是多少他的位置始终是针对页内的某个元素的,那么单纯的

absolute是不行的。

正确的解决方法就是在元素的父级元素定义为position:relative;(更正:这里可以是祖父

级,也可以是position:absolute;)需要绝对定位的元素设为position:absolute;

这样再设定top,right,bottom,left的值就可以了,这样其定位的参照标准就是父级的左上角padding的左上侧!

********************************************************************************

第1页

你可能喜欢

  • 盒子模型
  • DIV CSS
  • 漂亮表格
  • div+css
  • 网易邮箱
  • div布局
  • 下拉菜单

热门文档

相关文档

  • Htmldiv+css的绝对定位和相对定位

    Htmldiv+css的绝对定位和相对定位_IT/计算机_专业资料。Htmldiv+css的绝对定位和相对定位,让你一目了然~~概要: 本文主要描述 XHTML 中相对定位和绝对定位各自的...

  • CSS+DIV相对定位和绝对定位的区别和联系

    CSS+DIV 相对定位和绝对定位的区别和联系你对 CSS+DIV 定位的概念是否熟悉,这里和大家分享一下,主要包括 CSS+DIV 相对定位和绝对定位两大部分内 容,如果理清了...

  • div+css相对定位和绝对定位用法实例详解

    div+css相对定位和绝对定位用法实例详解_计算机软件及应用_IT/计算机_专业资料...挂在半空中的钩子上,水桶中西瓜原来占用的空间水会自动填补它(绝对定位对象会...

  • 实例演示div+css的绝对定位和相对定位布

    实例演示div+css的绝对定位和相对定位布_IT/计算机_专业资料。实例演示div+css的绝对定位和相对定位布概要: 概要: 本文主要描述 XHTML 中相对定位和绝对定位各自...

  • div+css的绝对定位与相对定位

    div+css的绝对定位与相对定位_IT/计算机_专业资料。对div+css的绝对定位与...relative:相对定位,CSS 写法" position: relative; ",参照父级的"内 容区域...

  • div相对定位于绝对定位

    div相对定位于绝对定位_互联网_IT/计算机_专业资料。div相对定位于绝对定位Div 中绝对定位于想对定位的比较 注意点:只有当盒子是固定的有大小宽度是才能够显示...

  • CSS相对定位和绝对定位

    不是参照物 <div box1 <div box2 ——–absolute <div box3 效果图: 图5 以最近的祖先定位元素为参照物的情况 图 6 中, Box2 设置成绝对定位元素, 脱离...

  • css相对定位和绝对定位

    CSS中的绝对定位和相对定位详解 01 December 2009 0:23 Tuesday by 小屋 分享收藏标签: background div 定位 负值 1.定位的专业解释(1)语法 position:static...

  • CSS绝对定位与相对定位

    CSS绝对定位与相对定位_计算机硬件及网络_IT/计算机_专业资料。总结一下CSS绝对... div+css的绝对定位与相对... 6页 免费 CSS中的绝对定位_6c62 暂无评价 3...

站点地图 | 文档上传 | 侵权投诉 | 手机版
本站所有资源均来自互联网,本站只负责收集和整理,均不承担任何法律责任,如有侵权等其它行为请联系我们.
文档下载 Copyright 2013 doc.guandang.net All Rights Reserved.  -  email