`

浅谈相对定位和绝对定位

    博客分类:
  • css
阅读更多

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

2.position:absolute; 表示绝对定位,位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。(因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高,它显示的越在上层。)

3.父容器使用相对定位,子元素使用绝对定位后,这样子元素的位置不再相对于浏览器左上角,而是相对于父窗口左上角

4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置,这四个属性只有在该元素使用定位后才生效,其它情况下无效。另外这四个属性同时只能使用相邻的两个,不能即使用上又使用下,或即使用左,又使用右

更详细关于相对定位和绝对定位的介绍请参考http://www.aa25.cn/div_css/899.shtml

文章出处:标准之路(http://www.aa25.cn)

 

下面是一个二级列表的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{font-family:"宋体";font-size:12px;line-height:1.5;}
#menu{border:#000000 solid 1px;width:100px;margin-left:20px;}
#menu ul {list-style:none;margin:0px;padding:0px;}
#menu ul li{background:#eee;padding:0px 8px;height:26px;line-height:26px;border-bottom:#999999 solid 1px;position:relative;}
a{text-decoration:none;color:#000;}
a:hover{color:#FF3300;}
#menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none;z-index:100; }
#menu ul li:hover ul { display:block;}
</style>
</head>

<body>
<div id="menu">
<ul>
<li><a href="@#">首页</a></li>
<li><a href="#">网页版式布局</a>
	<ul>
	<li><a href="#">自适应宽度</a></li>
	<li><a href="#">固定宽度</a></li>
	</ul>
</li>
<li><a href="#">div+css教程</a>
	<ul>
	<li><a href="#">新手入门</a></li>
	<li><a href="#">视频教程</a></li>
	<li><a href="#">常见问题</a></li>
	</ul>
</li>
<li><a href="#">div+css实例</a></li>
<li><a href="#">常用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
</ul>
</div>
</body>
</html>

 

 

分享到:
评论

相关推荐

    浅谈GPS静态相对定位与RTK定位在煤田勘探中的应用.pdf

    根据接收机使用信号的方式,GPS定位可以分为绝对定位和相对定位两种类型。绝对定位提供的是相对于地心的坐标,通常分为静态和动态两种形式。静态绝对定位的精度可达到米级,适用于对精度要求不是特别高的导航定位。...

    浅谈相对论(已有一部分本人注释)(PDF格式)

    尽管狭义相对论的概念对于初学者来说可能有些抽象难懂,但通过具体的例子和深入浅出的解释,即便是中学生也能理解其基本原理。爱因斯坦的相对论不仅是科学史上的里程碑,也是人类探索自然界的宝贵财富。希望通过对...

    浅谈天线高对静态GPS的影响.pdf

    静态定位常用于绝对定位和相对定位,其中静态相对定位具有较高的实用价值,因为它能精确地确定多个接收机之间的相对位置。 文章进一步分析了天线高度对基线解算和无约束平差的影响。通过误差传播定律,作者得出结论...

    浅谈GPS技术在公路测量中的应用 (2).pdf

    GPS定位原理主要有两种:绝对定位和相对定位。绝对定位通过计算GPS接收机与卫星之间的距离来确定用户在地心坐标系中的绝对位置,这种方式简单快捷,但精度相对较低。相对定位,又称为差分GPS定位,通过两台GPS接收机...

    浅谈CSS编程中的定位问题

    本文将探讨CSS中的定位概念,包括相对定位和绝对定位等不同类型的定位模式。 首先,我们来了解CSS盒模型。CSS盒模型是页面布局的基础,它为每个元素定义了一个矩形盒子,该盒子包含了四个部分:内容区、内边距、...

    浅谈网页设计中元素定位 (2013年)

    本文将对网页元素定位方式中的表格布局和Div+CSS样式定位的优缺点进行比较分析,并深入探讨CSS绝对定位、相对定位和浮动的相关知识。 首先,我们来看看表格布局。表格布局的原理是使用表格中的单元格来放置网页元素...

    浅谈城市建筑测量中GPS测量网技术设计.pdf

    GPS测量技术主要包括单位定点法、差分定位法和相对定位法。单位定点法使用单一接收器进行绝对定位,适用于基础定位;差分定位法通过多台接收器消除误差,提高精度至米级;相对定位法则通过多点同时测量,实现更高...

    浅谈GPS测绘技术在工程规划放样中的应用.pdf

    【GPS定位系统】全球定位系统(GPS)是一种卫星导航定位系统,由美国建立,提供全球范围内的全天候、连续、实时的三维导航、定位和测速服务。它具有高精度、多功能、操作简便等特点,观测站之间无需视线接触,且能...

    浅谈Andriod五大布局

    相对布局允许子元素相对于其他元素的位置进行定位,这提供了更大的灵活性。每个子元素可以通过`android:layout_alignParent`、`android:layout_toLeftOf`、`android:layout_below`等属性与父容器或其他子元素建立...

    浅谈Android五大布局.PDF

    Android提供了多种布局方式来满足不同的界面需求,其中最常用的五大布局为LinearLayout(线性布局)、FrameLayout(单帧布局)、AbsoluteLayout(绝对布局)、RelativeLayout(相对布局)和TableLayout(表格布局)...

    浅谈pc端rem字体设置的问题

    1、内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常 2、长,宽,LEFT,TOP,RIGHT,BOTTOM都采用了REM,并且HTML...

    企业薪酬管理浅谈.pptx

    - **基本观点**: 员工对薪酬的满意程度取决于相对收入而非绝对收入。 - **分享经济理论** - **代表人物**: 马丁、魏茨曼。 - **基本观点**: 员工的收入应与企业的盈利状况挂钩,实现利益共享。 #### 二、企业...

    浅谈 Node.js 模块机制及常见面试问题解答1

    1. **路径分析**:解析模块的相对或绝对路径。 2. **文件定位**:根据解析的路径找到相应的文件,如果未指定扩展名,会尝试添加.js、.json、.node扩展名进行匹配。 3. **编译执行**:加载并执行找到的模块文件,如果...

    浅谈CSS中的百分比

    当绝对定位的元素没有定位的祖先元素时,该绝对定位元素会参照视口的高度。这一点尤其重要,因为没有明确的参照物时,视口高度就成为了参照基准。 在实际编码中,我们需要注意的是,百分比单位的使用需要根据具体的...

    浅谈java 中文件的读取File、以及相对路径的问题

    在Java编程中,对文件的读取是常见的需求,尤其在项目开发过程中,正确地定位和加载配置文件或资源文件是非常重要的。本文主要讨论了如何在Java中读取文件以及处理相对路径的问题。在这个过程中,我们会涉及到几个...

    浅谈CSS块级元素与行内元素(内联元素)的区别和联系

    在CSS布局中,理解相对定位(relative)、绝对定位(absolute)和固定定位(fixed)的概念也很重要。相对定位是相对于元素在文档流中的原始位置偏移,但保持原有空间。绝对定位则完全脱离文档流,相对于最近的非静态...

    浅谈jQuery的offset()方法及示例分享

    由于 offset() 方法处理的是文档级别的元素位置,因此它在处理整个页面的布局调整时尤其有效,但需注意的是,其对于相对定位(position: relative)和绝对定位(position: absolute)元素的处理有所不同。...

    元器件应用中的浅谈编码器分类及其原理

    总的来说,编码器是实现自动化设备高精度定位和控制的关键组件。无论是增量式还是绝对式,它们都通过转换机械运动为电信号,使系统能够实时响应并调整位置,从而提高整体系统的效率和精度。了解编码器的分类和工作...

    Android控件布局(浅谈5种布局)

    布局的类型:LinearLayout(线性布局)、RelativeLayout(相对布局)、FrameLayout(帧布局)、TableLayout(表格布局)、Absolute(绝对布局) 1.LinearLayout线性布局:主要以水平和竖直方式来显示界面中的控件。...

    浅谈CSS三栏布局的N种实现

    通常利用负margin和相对定位来实现。这种方法的优势在于可以很好地处理内容区域的自适应性,但实现起来较为复杂。 3. **双飞翼布局** 双飞翼布局是另一种应对三栏布局的策略,它通过内联元素的浮动和外边距负值来...

Global site tag (gtag.js) - Google Analytics