css定位属性(Positioning)允许对元素进行定位
css为定位和浮动提供了一些属性,利用这些属性可以建立列式布局,将布局的一部分和另一部分重叠。
css有三种基本的定位机制:普通流、浮动流、绝对定位
css position属性有四种不同类型的定位
1、static
元素框正常生成,
2、relative
元素框偏移某段距离,元素仍保持定位前形状,原本空间保留
3、absolute
元素从文档流完全删除,原本空间关闭,定位后生成一个块级框。
4、fixed
类似于absolute
相对定位:
<style type="text/css"> h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; left:20px } </style> <h2>这是位于正常位置的标题</h2> <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2> <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2> <p>相对定位会按照元素的原始位置对该元素进行移动。</p> <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p> <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
结果:
这是位于正常位置的标题
这个标题相对于其正常位置向左移动
这个标题相对于其正常位置向右移动
相对定位会按照元素的原始位置对该元素进行移动。
样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。
样式 "left:20px" 向元素的原始左侧位置增加 20 像素。
绝对定位:
<style type="text/css"> h2.pos_abs { position:absolute; left:100px; top:150px } <h2 class="pos_abs">这是带有绝对定位的标题</h2> <p>通过绝对定位,元素可以放置到页面上的任何位置。 下面的标题距离页面左侧 100px,距离页面顶部 150px。</p>
结果:
相关推荐
本篇文章将围绕“CSS样式工具”和“CSS学习工具”这两个核心概念,详细介绍相关知识点。 一、CSS基础知识 1. 选择器:CSS选择器是用于选取HTML元素的方式,例如标签选择器(如`p`)、类选择器(如`.myClass`)和ID...
**CSS学习手册** 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它负责定义网页元素的样式,包括颜色、字体、布局以及页面的呈现方式。本手册将帮助初学者深入理解和掌握CSS的基本概念和技术...
【CSS学习经典教程】是一份专为初学者和有一定基础的学习者设计的教程,旨在帮助他们深入理解并熟练掌握CSS(层叠样式表)技术。CSS是网页设计中不可或缺的一部分,用于控制网页元素的布局、颜色、字体、大小等视觉...
《CSS学习手册》 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它赋予了HTML或XML文档以样式和布局。本手册旨在深入解析CSS的相关知识,帮助初学者快速上手并掌握其核心概念。 一、CSS基础 ...
在这个"css学习心得"中,我们将详细探讨CSS的各个方面,帮助开发者更好地理解和应用这一技术。 首先,CSS的基础知识是必不可少的。这包括选择器,如类选择器(.class)、ID选择器(#id)和元素选择器(element),...
这个“CSS学习帮助文档(chm格式)”显然是一个专门针对CSS技术的综合资源,包含了关于样式设计的各种信息,旨在帮助用户深入理解和掌握CSS。 **CSS基础** CSS的基础概念包括选择器、属性和值。选择器用于匹配HTML...
本资源包“CSS学习资料,初级”专为初学者设计,旨在提供一个易于理解的学习平台,帮助初学者快速掌握CSS的基础知识。 **一、CSS简介** CSS(Cascading Style Sheets)是一种样式表语言,用于描述HTML或XML(包括如...
这个压缩包文件看起来是一个全面的CSS学习资源集合,包含了CSS生成器、各种经典的CSS样式示例以及CSS的学习文档。接下来,我们将深入探讨这些知识点。 首先,CSS生成器是一个在线工具,它允许用户通过图形用户界面...
在"CSS学习"这个主题中,我们需要探讨以下几个关键知识点: 1. **CSS基础**:CSS的基本语法包括选择器、属性和值。选择器用于指定要应用样式的元素,比如`p`代表所有段落,`.class`代表具有特定类名的元素,`#id`...
【DIV+CSS学习文档】 网页设计与开发领域中,`DIV+CSS`是一种常见的布局技术,它极大地提升了网页的可维护性和效率。本学习文档旨在深入解析`DIV+CSS`的核心概念,帮助初学者理解并掌握这一技术。 一、什么是DIV?...
综上所述,《CSS经典学习笔记》旨在提供一个全面的CSS学习路径,无论你是初学者还是有经验的开发者,都能从中受益,提升你的CSS技能和网页设计能力。通过深入实践和不断探索,你会发现CSS不仅可以打造出美观的界面,...
这个名为“一个css学习打包网站”的资源,显然是为了帮助学习者深入理解和掌握这一技术。 首先,CSS是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言。它的主要功能是分离网页内容和表现,...
这篇详尽的指南将针对标题"css学习比较不错的资料"和描述中的内容,提供关于CSS的基础知识,旨在让初级水平的学习者也能轻松理解和掌握。 首先,CSS是Web设计的核心技术之一,它负责定义网页的外观、布局和结构。...
- Grid布局:学习CSS网格系统,用于创建二维布局。 5. CSS响应式设计: - 媒体查询:利用@media规则针对不同设备和屏幕尺寸设置不同的样式。 - 移动优先和流式布局:理解如何构建适应各种屏幕大小的网站。 6. ...
本教程“DIV+CSS学习 精通CSS实例”旨在帮助初学者掌握这一关键技术,通过20个精心设计的实例,深入浅出地讲解了CSS的布局原理和实际应用。 首先,我们要理解什么是CSS。CSS(Cascading Style Sheets)层叠样式表,...
**CSS学习手册** 在网页设计领域,层叠样式表(Cascading Style Sheets,简称CSS)是不可或缺的一部分,它赋予HTML或XML文档以视觉样式,让网页内容更加丰富多彩且易于维护。作为史上最全的CSS学习手册,我们将深入...
电脑CSS学习教程是针对想要深入理解和掌握CSS技术的初学者或进阶者设计的一系列学习资料。 在CSS的学习过程中,你需要了解以下几个核心概念: 1. **选择器(Selectors)**:选择器用于定位HTML或XML文档中的特定...
这三本书合在一起,构成了一个全面的CSS学习路径。从基础到高级,从理论到实践,从解决常见问题到探索前沿技术,它们都能提供丰富的知识和洞察。无论你是刚开始接触CSS,还是想要提升现有技能,这些资源都将极大地...
以下是根据标题、描述以及压缩包文件名称所涉及到的CSS学习的相关知识点: 1. **CSS基础入门**: - **选择器**: CSS的核心在于选择器,如类选择器(.class)、ID选择器(#id)、元素选择器(element)、属性选择器...