<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
//计算位置的函数：元素，属性
function calculateOffset(field, attr) {
var offset = 0;
while (field) {
//文本框[属性]，这种写法得到当前元素相对于父元素的偏移值
offset += field[attr];
field = field.offsetParent;
}
return offset;
}
onload=function(){
var Obj = document.getElementById("d");
var div = document.getElementById("dd");
var W = Obj.offsetWidth ;
var L = calculateOffset(Obj,"offsetLeft")
var T = calculateOffset(Obj,"offsetTop")
div.style.left=L+"px";
div.style.top=T+Obj.offsetHeight+"px";
div.style.width=W +"px";
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE width=90% height=300 border="1" bgcolor="red">
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD><input id="d"/></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
<div style="position:absolute;height:60px; background:yellow;border:1px blue solid" id="dd">asdf</div>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function creatediv(obj){
cleardiv() ;
var w ; // 宽
var h = "100" ; // 高
var l ; // 左边距
var t ; // 上边距
w = obj.offsetWidth ;
l = obj.offsetLeft ;
t = obj.offsetTop+obj.offsetHeight ;
var temp = obj.offsetParent ;
while(temp){
l+=temp.offsetLeft ;
t+=temp.offsetTop ;
temp=temp.offsetParent ;
}
var div = document.createElement("div");
div.id ="div" ;
div.innerHTML="abc" ;
with(div.style){
position="absolute";
width=w +"px";
height=h+"px" ;
left=l+"px";
top=t+"px";
backgroundColor="red";
borderColor="black";
}
div.onclick=function(){
document.body.removeChild(this);
}
// alert(div.innerHTML);
document.body.appendChild(div);
//alert(w+" "+h+" "+l+" "+t);
}
function cleardiv(){
var d = document.getElementById("div") ;
if(d){
document.body.removeChild(d);
}
}
//-->
</SCRIPT>
<center>
<div style="width:80%;background:yellow">
<TABLE width="90%" border="1">
<TR>
<TD>a</TD>
<TD>b</TD>
<TD>c</TD>
<TD>d</TD>
<TD>e</TD>
</TR>
<TR>
<TD>a</TD>
<TD>b</TD>
<TD>c</TD>
<TD>d</TD>
<TD>e</TD>
</TR>
<TR>
<TD>a</TD>
<TD>b</TD>
<TD><input onclick="creatediv(this)"></TD>
<TD>d</TD>
<TD>e</TD>
</TR>
<TR>
<TD>a</TD>
<TD>b</TD>
<TD>c</TD>
<TD>d</TD>
<TD>e</TD>
</TR>
</TABLE>
</div>
</center>
<script>
//jQuery method
$(function(){
var O_ = $("#d").offset();
$("#dd").css({"left":O_.left+"px","top":(O_.top+$("#d").height()+5)+"px"});
$("#dd").width($("#d").width());
});
</script>
分享到：
相关推荐
在这个“DIV弹出层+定位”的例子中，我们关注的是如何利用`DIV`来创建一个可滑动的弹出层，并且使其在页面上保持固定的位置。这种功能通常用于显示提示信息、模态对话框或者加载额外的内容。 首先，`DIV弹出层`是指...
然而，为`div`弹出层进行准确的定位可能会遇到一些挑战，因为这涉及到CSS布局、浏览器兼容性以及页面动态变化等多个方面。下面我们将详细探讨`div`弹出层定位问题的处理方法。 首先，让我们理解`div`的基本概念。`...
本文将深入探讨如何利用CSS来定位div标签，并掌握其中的关键概念和技术细节。 #### 一、CSS定位概述 CSS提供了多种方式来控制页面上元素的位置，包括静态定位(static)、相对定位(relative)、绝对定位(absolute)和...
**步骤3：定位div** 在CSS中，我们可以使用`position`属性来控制`div`的定位。常见的定位方式有`static`（默认值，遵循正常的文档流）、`relative`（相对定位，基于元素原本的位置进行偏移）、`absolute`（绝对定位...
这一章将深入讲解Div的使用，包括如何创建和定位Div，以及如何通过CSS属性（如display、position、float等）实现流式布局、网格布局和相对/绝对定位。同时，还会涉及Div的嵌套和组合，以实现复杂页面结构。 **第8章...
本案例中，`<div>`元素采用的是绝对定位(`position: absolute`)和固定定位(`position: fixed`)结合的方式。 #### JavaScript实现逻辑 接下来通过JavaScript来控制`<div>`元素的行为： 1. **监听页面滚动**：使用`...
通过巧妙地组合和定位div，可以创建出复杂的网页结构，并通过CSS进行美化和响应式设计。 【描述】：“一款div+css做的网站,有助于学习div+css网站技术。” 这个网站实例为初学者提供了实践和学习div+css的机会。...
定位DIV 通过设置`.div`类的`position: absolute;`属性来让DIV能够脱离正常文档流进行位置定位。 ##### 2. 计算位置 每个函数（`sc1`, `sc2`, `sc3`, `sc4`）都负责计算并更新相应DIV的位置。例如，`sc1`函数...
3. **动态定位div**：利用CSS的`position`属性（如`absolute`或`fixed`），结合JavaScript计算出div的left和top值，使其跟随鼠标位置显示。 4. **CSS样式**：设置div的透明度、背景色、边框、阴影等样式，以提高...
4. `.div-relative` - 这是一个相对定位的容器，它的作用是为内部的绝对定位div提供一个参考坐标系。即使`.div-relative`本身没有设置`left`、`right`、`top`或`bottom`，它的`position`属性被设置为`relative`，...
在后台模板中，CSS通过选择器定位Div或其他元素，为其设定样式，实现定制化的视觉效果。 3. 后台模板：后台模板是预先设计好的界面结构，包含了后台管理系统的常用组件和布局，如登录页面、导航菜单、数据表、操作...
通过学习这些源码，你可以理解如何通过CSS选择器定位Div元素，应用样式，以及如何组织和嵌套Div来构建复杂的布局。同时，你还能了解到如何利用媒体查询（Media Queries）实现响应式设计，确保在不同的设备上都能呈现...
// 定位div到链接下方 } function positionDivBelowLink(div) { // 根据链接的位置计算div的位置 // 这里需要具体的CSS布局和浏览器兼容性处理 } ``` 5. **弹出div的定位**： 要使div定位到链接下方，你...
在本教程中，我们将学习如何创建和定位DIV，以及如何使用Float属性让多个DIV并排显示。例如，通过设置`float:left`或`float:right`，可以实现左右排列的布局。同时，使用CSS的`margin: 0 auto`可以实现DIV的水平居中...
4. DIV应用：创建和定位DIV，构建复杂布局。 5. JavaScript基础：变量、数据类型、函数和事件处理。 6. DOM操作：使用JavaScript修改HTML元素。 7. AJAX应用：异步数据交换，实现无刷新更新。 8. HTML5新特性：语义...
本主题主要探讨如何让div元素浮于页面固定位置、实现展开与隐藏的效果，以及利用锚点进行精确定位。这些技巧对于创建交互性强、用户体验良好的网页至关重要。 一、div元素的固定定位 在CSS中，我们可以使用`...
本篇将深入探讨如何使用CSS来定位div，以及涉及到的一些核心概念和技术。 首先，了解浏览器的解析顺序至关重要。浏览器从上到下，从左到右解析HTML文档，并逐行渲染内容。为了优化网页加载和SEO（搜索引擎优化），...
在《别具光芒》的实例中，读者可以学习如何创建和定位Div，以及如何利用它来构建复杂的网页结构。 2. **CSS基础**：CSS允许我们控制网页的字体、颜色、大小、位置等视觉属性。书中可能涵盖选择器的使用（如类选择器...
在网页设计中，CSS（层叠样式表）和DIV（定义文档布局的HTML元素）的定位是至关重要的，它们决定了页面元素如何在屏幕上精确地展示。本篇文章将深入探讨CSS中的四种定位方式：static、relative、absolute和fixed，...