`
百合不是茶
  • 浏览: 354720 次
社区版块
存档分类
最新评论

div定位和css的层叠

阅读更多

        概述:  在web开发中相信最开始学习的时候,希望能将div放到我们希望放到的地方和窗体的层叠,看似简单的问题 对于我们这些菜鸟来说确实很困难的,下面就介绍窗体的定位和层叠

 

 

top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
position  定义窗体的位置   相对位置和绝对位置

 

   

   overflow  设置当元素的内容溢出其区域时发生的事情。
   z-index:设置窗体的层  index越大层就在最上面,默认为0

 

 

overflow的属性;

 

visible	默认值。内容不会被修剪,会呈现在元素框之外。
hidden	内容会被修剪,并且其余内容是不可见的。
scroll	内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

 

 

绝对定位; position:absolute  

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>JS示例-首页</title>
<style type="text/css">
#zero{
	border:1px #0000ff solid;
	width:100%;
	height:100%;
}
#first{
	width:300px;
	height:300px;
	background:#ff0000;
	position:absolute;
	z-index:1;
	top:30px;
	left:30px;

}

#second{
	width:300px;
	height:300px;
	background:#00ff00;
	position:absolute;
	z-index:1;
	top:100px;
	left:300px;

}
</style>

</head>

<body>
	<div id="zero">
	<div id="first"></div>
	<div id="second"></div>
	
	</div>
</body>
</html>

 



 

 

 

 

 

相对定位;position:relative

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>JS示例-首页</title>
<style type="text/css">
#zero{
	border:1px #0000ff solid;
	width:100%;
	height:100%;
}
#first{
	width:300px;
	height:300px;
	background:#ff0000;
	position:relative;
	z-index:1;
	top:30px;
	left:30px;

}

#second{
	width:300px;
	height:300px;
	background:#00ff00;
	position:relative;
	z-index:1;
	top:100px;
	left:300px;

}
</style>

</head>

<body>
	<div id="zero">
	<div id="first"></div>
	<div id="second"></div>
	
	</div>
</body>
</html>

 

 

 

  • 大小: 4.8 KB
  • 大小: 7.5 KB
0
0
分享到:
评论

相关推荐

    DIV+CSS(WEB标准)精通CSS层叠样式表

    在网页布局中,DIV可以作为容器,包裹其他HTML元素,帮助我们实现内容的分块和定位,从而构建出清晰、结构化的页面结构。 接下来,CSS层叠样式表(Cascading Style Sheets)是用于描述HTML或XML(包括如SVG、MathML...

    经典DIV+CSS模板 经典DIV+CSS模板

    标题"经典DIV+CSS模板 经典DIV+CSS模板"表明这是一个关于使用HTML中的&lt;div&gt;元素和CSS(层叠样式表)进行网页布局的资源集合,可能包含了一些经过验证的、实用的网页设计模板。 描述中的关键词如"div+css"、"web标准...

    div+css手册

    这个手册的核心聚焦在HTML中的`div`元素和CSS(层叠样式表)的结合使用上,旨在帮助读者理解和掌握如何通过这两种技术构建高效、灵活且美观的网页布局。 `div`元素,全称是division,是HTML中的一个块级元素,通常...

    DIV+CSS漂亮的样式

    在网页设计领域,`DIV+CSS`是一种广泛使用的布局技术,它通过定义不同的CSS(层叠样式表)类来控制HTML中的`&lt;div&gt;`元素,从而实现页面的精美设计和结构化布局。本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS...

    div+css案例,网页设计

    在"div+css案例"这个压缩包中,我们可以预期找到一系列示例文件,展示了如何使用Div和CSS创建网页布局。这些案例可能包括以下内容: 1. **基本布局**:使用Div实现网格系统,例如两栏或三栏布局,展示如何通过CSS...

    DIV+CSS.rar_DIV_aspnet div css _css_css div_css div asp p

    标题中的“DIV+CSS.rar”表明这是一个关于网页布局技术的学习资料包,主要聚焦于使用HTML的&lt;div&gt;元素和CSS(层叠样式表)进行页面设计。ASP.NET是Microsoft开发的一个强大的Web应用程序框架,通常用于构建动态网站,...

    div+css布局制作箭头步骤流程样式 - div+css教程

    `div`元素作为容器,能够包裹其他HTML元素,而CSS(层叠样式表)则负责定义这些元素的外观和位置。在本教程中,我们将深入探讨如何使用`div+css`来制作箭头的步骤流程样式。 首先,理解`div`元素的基本概念至关重要...

    Table转div+css工具

    相比之下,Div是HTML中的一个通用容器元素,配合CSS(层叠样式表)可以实现更灵活、更精确的页面布局。CSS允许我们将样式与结构分离,提高了页面的可读性,降低了代码冗余,并使网页适应不同设备的显示需求。 Table...

    div+css div+css精通CSS

    标题与描述中提到的“div+css div+css精通CSS”这一主题,主要涉及的是网页设计与布局的核心技术——利用HTML中的div元素结合CSS样式表进行网页内容的组织与美化。接下来,我们将深入探讨这一主题所包含的关键知识点...

    CSS层叠样式表手册

    "CSS层叠样式表手册"是一本全面介绍CSS的资源,不仅涵盖了基础概念和语法,还深入讲解了各种布局模型和CSS3的新特性。配合实例演示,无论是初学者还是有经验的开发者,都能从中获益,提升CSS技能。通过学习这本手册...

    DIV+CSS入门教程

    标题中的"DIV+CSS入门教程"指的是学习使用HTML中的DIV元素配合CSS(层叠样式表)进行网页布局的基础教程,适合初学者。通常,这种布局方式被称为“Div+CSS布局”,但实际上是不准确的术语。 在描述中提到,"DIV+CSS...

    css+div布局和css教程和css的api

    Div元素是一个通用的容器,可以容纳其他HTML元素,通过CSS我们可以为Div设置样式,如宽度、高度、边距、内边距,以及浮动和定位,以此实现灵活多样的布局效果。这种方法相对于传统的表格布局,具有更好的可维护性、...

    DIV+CSS.rar_DIV_css+div_div+css_html+div+css_web前端

    `div` 是HTML中的一个块级元素,常用于网页布局,而 `CSS`(层叠样式表)则是用于控制网页元素样式和布局的重要工具。这个压缩包中的内容旨在帮助初学者掌握 `div+css` 的基本概念和实践应用,对web前端开发有显著的...

    CSS层叠样式表

    ### CSS层叠样式表:深度解析与应用 #### 一、CSS简介与重要性 CSS,全称为Cascading Style Sheets(层叠样式表),是由W3C组织制定的用于控制网页元素显示规则的一种强大技术。它允许网页设计者不仅能够高效地...

    CSS层叠样式表中文手册

    **CSS层叠样式表中文手册**是一份详细且全面的指南,旨在帮助用户理解和掌握CSS(Cascading Style Sheets)这一强大的网页设计语言。CSS是用于控制网页元素外观和布局的关键技术,它允许设计师分离内容与表现,使...

    table布局网页转换为div+CSS布局的转换软件

    在网页设计领域,传统的`table`布局曾是构建网页结构的主要方式,但随着Web标准的发展,`div`结合`CSS`布局(层叠样式表)逐渐成为主流。`table`布局虽然简单易用,但在复杂性和可维护性上存在诸多问题,如不易控制...

    div+css.rar_CSS html_CSS DIV html_DIV_DIV CSS_html CSS

    在网页设计领域,CSS(层叠样式表)与HTML(超文本标记语言)是构建网页结构和样式的两大基础技术。本资料包"div+css.rar"专注于讲解如何利用CSS与HTML进行有效的页面布局,尤其对初学者而言,是一份极好的学习资源...

    整站模板DIV+CSS 源码DIV+CSS 

    【标题】"整站模板DIV+CSS 源码"是指使用了HTML的布局技术——Div(Division,分块)和CSS(Cascading Style Sheets,层叠样式表)来设计和构建整个网站模板的源代码。这个标题暗示了我们讨论的是关于网页设计和开发...

    div+CSS经典书籍.rar

    div是HTML中一个非常重要的结构元素,用于创建网页的布局和组织内容,而CSS(层叠样式表)则是用于定义这些元素外观和样式的语言,使网页设计更具灵活性和表现力。这个压缩包包含了多个学习教程和一个经典案例,旨在...

Global site tag (gtag.js) - Google Analytics