这个position属性其实是指本体对上级的定位。如果这么理解,就好办了。
默认的属性值都是static,静态。就不用多说了。最关键的是
relative(相对)以及absolute(绝对)。
往往我们如果是COPY别人的代码,会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果,而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。我一开始也无能为力,后来发现只要把其上一级的样式属性position设置为relative就可以了。
也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。
例如如下A-B的嵌套结构
<div id="A">
<div id="B">
</div>
</div>当A的position为relative时,B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档,而是针对id为A的这个div了。
这样在开发一些基于B/S应用程序的时候,就能很方便的添加一些UI元素,例如某一个活动层的关闭按钮等。
分享到:
相关推荐
《CSS+Div网页模板整站解析》 在网页设计领域,CSS(层叠样式表)与Div元素的结合是构建现代网页布局的核心技术。本资料集合包含了一个完整的网站模板,由十个不同页面组成,旨在为网页设计师提供实用的参考和学习...
【描述】:这是一份以PPT(演示文稿)形式呈现的CSS+div建站基本教程,内容涵盖了从零开始到熟练运用CSS和div进行网页布局的全过程。PPT作为一种直观的教学工具,通常包含清晰的步骤、示例和解释,便于学习者理解和...
这一章将深入讲解Div的使用,包括如何创建和定位Div,以及如何通过CSS属性(如display、position、float等)实现流式布局、网格布局和相对/绝对定位。同时,还会涉及Div的嵌套和组合,以实现复杂页面结构。 **第8章...
1. 浮动布局:早期的`CSS+DIV`布局常使用`float`属性,让元素在容器中浮动,实现左右排列或自适应布局。 2. 盒模型:理解盒模型是布局的关键,它包括元素的内容、内边距、边框和外边距,影响元素的总尺寸。 3. 定位...
4. 定位机制:position属性(static, relative, absolute, fixed)控制元素在页面上的相对或绝对定位,是实现复杂布局的关键。 二、div与CSS布局 1. div作为容器:div元素通常用于组织页面内容,通过设置display...
5. **定位(Positioning)**:使用`position`属性(如`static`、`relative`、`absolute`、`fixed`),可以精确控制元素在页面上的位置。 6. **过渡(Transition)和动画(Animation)**:CSS3引入的这两个特性可以...
3. **定位和对齐**:通过position属性,CSS可以实现绝对定位、相对定位、固定定位等,使元素在页面上精确放置。同时,可以使用float和clear属性进行浮动和清除浮动,实现灵活的布局效果。 4. **盒模型**:CSS的盒...
2. 布局控制:通过CSS的display属性,可以将Div设置为块级元素或行内元素,实现流式布局、网格布局或定位布局。position属性则用于绝对定位和相对定位,使元素能在页面上的任意位置。 3. 定位与浮动:float属性可以...
《CSS+DIV详解网站好帮手》是一本深入解析CSS(层叠样式表)与DIV(定位元素)技术的专业书籍,对于网页设计和开发人员来说,无疑是一份宝贵的参考资料。CSS与DIV是构建现代网页布局的核心工具,它们的合理运用能够...
Div通常与其他CSS属性结合使用,如`float`、`display`和`position`,以实现各种布局效果。 **3. CSS布局模式** - **Block Layout**: 默认情况下,Div元素是块级元素,占据一整行并自动换行。 - **Inline Layout**: ...
此外,使用`position`属性可以实现菜单项的定位,比如创建悬停下拉菜单时,下拉菜单通常会设置为`position: absolute`,并根据其父元素(通常是菜单项)的位置进行定位。 最后,JavaScript(JS)用于实现交互性。在...
- **定位**:通过设置`position`属性,可以将元素相对于其正常位置或父元素进行绝对定位,这对于创建复杂的页面布局非常有用。 - **Flexbox**:弹性布局模型,允许在一个容器内灵活地布置子元素,无论容器的大小...
`div`元素常作为容器,通过CSS的`position`属性(如`relative`、`absolute`、`fixed`)配合`top`、`right`、`bottom`、`left`属性,可以实现表格的绝对定位,从而实现浮动表格或其他特殊布局效果。 最后,我们还...
3. **布局控制**:利用CSS,可以将div设置为块级元素(占据整行)或行内元素(与其他元素并排显示),以及浮动(float)和定位(position)以实现复杂的布局。 4. **栅格系统**:在网页设计中,div常用于构建栅格系统,...
通过对这些模板的实践和拆解,可以加深对CSS选择器、定位方法(如position属性)、盒模型等概念的理解。 **应用场景** CSS+Div布局广泛应用于各类网站,包括企业官网、电子商务平台、博客、新闻站点等。它们可以...
学习这个案例,你可以了解如何将HTML内容分组到`DIV`中,以及如何通过CSS控制`DIV`的尺寸、颜色、边距等属性。 总的来说,理解和掌握`HTML-CSS+DIV`是成为前端开发者的基础。通过实践,你可以创建出具有清晰结构和...
1. **定位**:通过`position`属性,我们可以将`div`元素放置在页面上的任意位置。可以设置`position: absolute;`或`position: fixed;`,然后使用`top`, `right`, `bottom`, `left`属性来精确控制元素的位置。 2. **...
Css+div_常用CSS标签及属性 Css+div是Web开发中最常用的技术之一,Css是用于描述网页样式和布局的标记语言,而div是Html中最基本的布局标签。本文将从Css+div的角度,总结常用的Css标签及属性,并进行分类。 Css中...
通过使用CSS,我们可以为这些DIV元素设置布局属性,实现复杂而灵活的网页设计。常见的布局模式有流式布局、网格布局和定位布局。 三、CSS选择器与属性 CSS选择器用于定位HTML元素,例如类选择器(.class)、ID选择...
4. 定位布局(Positioning Layout):通过`position`属性(static, relative, absolute, fixed),可以精确控制元素的位置。 四、CSS+Div实例 这个教程实例涵盖了以下常见布局: 1. 常规两栏布局:左右两部分,通常...