`
tekkenvs11
  • 浏览: 6406 次
  • 性别: Icon_minigender_1
  • 来自: 成都
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

学习CSS Position的10个步骤

阅读更多

1. position:static

所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。

一般来说,不用指定 position:static,除非想要覆盖之前设置的定位。

#div-1 {
 position:static;
}

static

2. position:relative

如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了】

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

relative

3. position:absolute

当指定 position:absolute 时,元素就脱离了文档【即在文档中已经不占据位置了】,可以准确的按照设置的 top,bottom,left 和 right 来定位了。

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

absolute

4. position:relative + position:absolute

如果我们给 div-1 设置 relative 定位,那么 div-1 内的所有元素都会相对 div-1 定位。如果给 div-1a 设置 absolute 定位,就可以把 div-1a 移动到 div-1 的右上方。

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

relative-and-absolute

5. 两栏绝对定位

现在就可以使用相对定位和绝对定位来做一个两栏布局了。

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

two-column-absolute

6. 两栏绝对定位定高

一种方案是给元素设定固定高度。但这种方案对大多数设计来说不太适合,因为一般我们不知道元素中会有多少文本,或者将要使用的精确的字号。

#div-1 {
 position:relative;
 height:250px;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

two-column-absolute-height

7. 浮动

对于可变高度的列来说,绝对定位就不起作用了,以下是另外一个方案。

我们可以浮动一个元素,使它移动到左边/右边,并且是文本环绕着它。这主要用于图像,但这里我们把它用于一个复杂的布局任务(因为这是我们唯一的工具)。

#div-1a {
 float:left;
 width:200px;
}

float

8. 浮动列

如果我们把一个元素向左浮动,并且把第二个元素也向左浮动,they will push up against each other。

#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
}

float-columns

9. 清除浮动列

在浮动元素之后,我们可以清除浮动来使其他元素正确定位。

#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}
#div-1c {
 clear:both;
}

float-columns-with-clear

虽然我一直用浮动布局,但是掌握好 position 也是必须的,其实也没那么难的。。。

10. Disclaimer & Resources

分享到:
评论

相关推荐

    css实现竖向步骤条.zip

    在本主题中,我们将深入探讨如何使用CSS(Cascading Style Sheets)来创建一个竖向步骤条,这是一种非传统的布局方式,能为界面增添独特的视觉效果。 一、基本结构 首先,我们需要创建HTML的基本结构,这通常包括...

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

    在本教程中,我们将深入探讨如何使用`div+css`来制作箭头的步骤流程样式。 首先,理解`div`元素的基本概念至关重要。`div`是一个块级元素,意味着它会占据一整行,并可以包含行内或块级元素。通过设置`div`的`width...

    CSS制作网页详细步骤图解

    CSS 制作网页详细步骤图解 本资源总结了使用 CSS 制作网页的...通过这篇教程,读者可以学习如何使用 CSS 制作一个美观、可靠的网页,并且了解了确定页面结构、使用绝对定位、制作背景图片、编写 HTML 代码等关键步骤。

    div+css布局制作横向带箭头步骤流程样式

    通过以上步骤,我们可以成功地使用`div+css`布局创建一个横向带箭头的步骤流程样式。这不仅有助于用户理解流程,还能提升网站的视觉吸引力和用户体验。在实际项目中,还可以根据具体需求进行定制和优化,如添加动画...

    css和div学习步骤

    理解并掌握这两者的学习步骤对于任何希望成为前端开发者的人都至关重要。下面将详细介绍CSS和`div`的学习过程,帮助你逐步进阶。 一、HTML `div`元素基础 1. `div`元素的含义:`div`是“division”的缩写,意为...

    轻松学习CSS.doc

    学习CSS是提升网页设计能力的关键步骤,因为它允许开发者将内容与表现分离,使网页设计更加灵活、可维护。 在HTML中,元素如`<p>`代表段落,`<h1>`代表标题,但它们自身并没有提供丰富的样式控制。随着互联网的发展...

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

    在本教程中,我们将详细探讨如何使用 `div` 和 `css` 来创建一个表示步骤流程的箭头样式,这种样式通常在注册或购物等多步骤流程中被广泛使用。 首先,我们需要创建 HTML 结构,这里可以使用若干个 `div` 元素来...

    批量输出 CSS background-position 属性的定位像素值

    在CSS中,`background-position`属性是一个非常重要的部分,它控制着背景图像在元素内的位置。这个属性允许我们精确地定位背景图像,从而实现各种视觉效果。 批量输出`background-position`属性的定位像素值通常是...

    html+css+js web 步骤引导样式

    3. `css`:这个文件夹可能包含了项目的CSS样式文件,如`styles.css`,用于定义步骤引导的外观。 4. `js`:这个文件夹可能包含了JavaScript代码,比如`script.js`,用以实现步骤引导的交互逻辑。 综上所述,...

    关于CSS position属性值absolute,relative的解释.zip

    在CSS布局中,`position`属性是一个至关重要的概念,它决定了元素在页面上的定位方式。本文件主要探讨了`position`属性的两个关键值:`relative`和`absolute`,这些知识点对于创建复杂的网页布局至关重要。 首先,...

    (代码)带 HTML CSS 和 JavaScript 的步骤进度条

    在本教程中,我们将探讨如何使用HTML、CSS和JavaScript来创建一个具有步骤的进度条,这种进度条通常用于多步骤流程,如注册、购物车结账或设置向导。以下是一个详细的步骤介绍: **HTML 结构** 首先,我们需要构建...

    CSS+Div 教程学习

    通过这样的步骤,你可以逐步构建出一个基于Div和CSS的静态网页布局。随着技能的提升,你还可以学习更复杂的布局技巧,如响应式设计、Flexbox和Grid布局,以适应不同设备和屏幕尺寸的需求。总之,CSS+Div教程学习是...

    css&html 学习project之七

    在“CSS&HTML 学习project之七”中,我们将深入探讨这两个核心技术,它们是构建网页的基础。HTML(HyperText Markup Language)负责定义网页的结构,而CSS(Cascading Style Sheets)则专注于网页的样式和布局。这个...

    css2中文手册学习

    在网页设计领域,CSS(Cascading ...在学习过程中,结合实际项目进行练习,将理论知识转化为实际技能,是提升CSS2能力的关键步骤。同时,了解并掌握CSS2的最新标准和浏览器兼容性,将使你的设计更具前瞻性和实用性。

    css3实现菱形布局步骤图效果源码下载

    在本案例中,我们关注的是使用CSS3实现菱形布局的步骤图效果。菱形布局通常用于创建独特的用户界面或者视觉吸引人的设计元素,比如游戏棋盘、图标或导航菜单。下面将详细阐述如何利用CSS3实现这一效果。 首先,我们...

    bootstrap步骤条-按钮-箭头样式

    在这个主题中,我们关注的是如何利用Bootstrap和CSS3创建一种特殊的步骤条,它包含带有箭头指向的按钮,这些按钮可以指示用户操作流程的方向。下面将详细阐述实现这个功能所需的知识点。 1. **Bootstrap基础**: -...

    css三十多个小案例源代码

    这个名为“css三十多个小案例源代码”的压缩包提供了一系列实践性的示例,旨在帮助初学者和有经验的开发者深化对CSS布局技巧的理解。下面将详细探讨这些案例可能涉及的知识点,以及它们在实际网页设计中的应用。 1....

    用html和css实现五星红旗

    要用HTML和CSS实现五星红旗,首先需要明确...可以使用margin、padding和position等CSS属性来进行调整。 根据设计需求,可能需要添加其他样式,如设置容器居中显示、调整五颗星之间的间距等。同时祝祝祖国母亲生日快乐

    CSS 网站设计模版学习

    四、使用CSS模版学习步骤 1. 分析结构:研究模版的HTML结构,理解各个元素之间的关系和层次。 2. 研究CSS:查看CSS文件,了解选择器的使用,样式规则的定义,以及盒模型的应用。 3. 修改调试:尝试修改模版中的CSS...

    利用HTML和CSS制作一个八卦图.md

    这可以通过定义一个`div`元素并应用适当的CSS样式来完成。 ```html <div class="circle"></div> ``` 对应的CSS样式如下: ```css .circle { width: 300px; height: 300px; border-radius: 50%; /* 将四角变为...

Global site tag (gtag.js) - Google Analytics