<html>
<head>
<style type="text/css">
*{
margin:0;
padding:0;
}
#id1{
position:relative;
border:1px solid;
}
#id2{
position:relative;
boreder:1px solid;
width:100px;
height:100px;
}
#id3{
position:retive;
border:1px solid;
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
function createDialog(){
var dialogs=document.getElementById("dialogs");//获取id
var noSizeDiv=document.createElement("div");//插入一个div
noSizeDiv.style.width=0;//设置该div的宽度和高
noSizeDiv.style.height=0;
var div=document.createElement("div");
var index=dialogs.children.length;//编号
div.style.position="relative";
div.style.height="100px";
div.style.width="100px";
div.style.border="1px solid";
div.style.left=(100+20*index)+"px";
div.style.top=(100+20*index)+"px";
noSizeDiv.appendChild(div);
dialogs.appendChild(noSizeDiv);
}
function increaseHeight(){
var div=document.getElementById("id1");
div.style.height=(20+parseInt(div.style.height))+"px";//增加20px
}
</head>
<body>
<button onclick="increaseHeight()">增高</button>
<button onclick="createDialog()">增高</button>
<div id="dialogs" style="height:2000px;">
<div style="width:0;height:0"> //套一个空的div
<div id="id1" style="left:100px;top:100px;width:100px;height:100px"></div>
</div>
<div style="width:0;height:0">
<div id="id2" style="left:120px;top:120px;"></div>
</div>
<div style="width:0;height:0">
<div id="id3" style="left:140px;top:140px;"></div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
相对定位的特点在于，即使元素的位置发生了改变，但它仍然保持着未定位前的形状，并且不会影响到其他元素在页面上的布局，即它原本占据的空间依然会被保留。 **定位属性** 在CSS中，定位属性主要由两个部分构成：...
相对定位的元素不脱离文档流，因此仍然会影响周围元素的布局。同时，相对定位的元素无法层叠。 举例说明，假设网页是一个房间，其中有一个装水的桶，桶里的西瓜代表要定位的元素。绝对定位就像是把西瓜从桶里捞出来...
2. 定位模式：CSS提供了相对定位、绝对定位、固定定位和静态定位四种定位方式。相对定位使元素相对于其正常位置移动，不脱离文档流；绝对定位相对于最近的非静态定位祖先元素定位；固定定位则相对于浏览器窗口定位；...
- **文档流**：绝对定位元素脱离了正常文档流，而相对定位元素仍然存在于文档流中，不影响其他元素的布局。 - **影响范围**：绝对定位会影响其所在层的所有元素，而相对定位仅影响自身。 ### 实践应用 1. **创建弹...
浮动、绝对定位和相对定位是CSS中的关键概念，它们对于创建复杂的网页布局至关重要。本讲座将深入探讨这些概念，帮助您理解何时及如何有效地使用它们。 1. CSS 浮动（Float） 浮动最初是为了实现文本环绕图像而引入...
### 网页制作中层相对定位的实现方法 #### 概述 在网页设计与开发领域，元素的精准定位是构建美观、功能性强的网页布局的关键。传统的表格定位方式虽然能够实现一定的布局效果，但操作繁琐且灵活性较差。相比之下，...
总结一下，`div`中的相对定位和绝对定位是CSS布局中不可或缺的部分。相对定位适用于微调元素位置，而不影响其他元素布局；绝对定位则用于创建独立于文档流的定位元素，常用于复杂的布局和层叠效果。熟练掌握这两种...
在网页布局中，`div`的相对定位和绝对定位提供了解决复杂布局问题的强大工具。相对定位允许元素在其原位置基础上移动，而不会影响其他元素；绝对定位则允许元素脱离正常流，相对于特定祖先或浏览器窗口进行定位。...
在CSS布局中，相对定位（relative positioning）允许元素相对于其正常位置进行偏移，而不影响其他元素的布局。通过设置`position: relative;`及`top`, `bottom`, `left`, `right`属性，我们可以调整元素的位置。然而...
定位模式包括静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。边偏移属性则涉及top、bottom、left和right，用于控制元素在页面上具体位置的偏移量。 静态定位是默认的定位方式，元素...
1. **灵活性**：相对布局提供了一种灵活的方式来定位视图，使它们能够根据设备屏幕尺寸动态调整位置。 2. **兼容性**：相对布局广泛应用于不同版本的Android系统中，具有良好的兼容性。 3. **简洁性**：相比线性布局...
相对布局允许开发者将界面元素相对于其他元素或布局自身进行定位，从而实现复杂和动态的界面设计。 相对布局的基本概念是，它不按照线性的顺序（如水平或垂直）排列组件，而是根据各个组件之间的相对位置关系来决定...
相对布局（RelativeLayout）是Android提供的一种布局方式，它允许视图相对于其他视图进行定位，从而实现灵活多样的界面设计。本练习项目是一个简单的石头剪刀布游戏，通过使用相对布局，初学者可以深入理解其工作...
在网页设计和开发中，定位（Positioning）是布局的关键元素，主要分为两种类型：相对定位（Relative Positioning）和绝对定位（Absolute Positioning）。这两种定位方式都是CSS（层叠样式表，Cascading Style Sheets...
相对定位的方法制作页面布局
相对布局允许元素相对于彼此或父容器定位，提供了更大的灵活性。 相对布局（RelativeLayout）在XML布局文件中使用`<RelativeLayout>`标签定义，而在代码中则通过`RelativeLayout`类实例化。这种布局的优势在于，它...
- 相对定位元素仍然占据原有空间，其偏移量是相对于自身的位置进行计算的。 - 在示例代码中，`.relativeStyle`类就是使用相对定位的例子： ```css .relativeStyle { position: relative; top: 110px; left: ...
- 相对定位不会改变元素在文档流中的位置，元素偏移后，其原始空间仍被保留，不影响其他元素的布局。 要实现一个固定宽高元素在页面上的垂直水平居中，可以采用绝对定位结合负margin或者使用CSS Flexbox或Grid布局...
相对布局（RelativeLayout）是Android提供的一种布局方式，它允许视图组件相对于其他组件或布局边缘进行定位，提供了灵活的界面设计能力。下面我们将深入探讨相对布局的工作原理、特点、优势以及如何在实际开发中...