css相对定位

核心提示:css绝对定位使你能精确地定位要素在页面的 独立位置,而不考虑页面其它要素的定位 设置。相对定位指你所定位的要素的位置相对于 它在文件中所分配的位置。

css绝对定位使你能精确地定位要素在页面的 独立位置,而不考虑页面其它要素的定位 设置。相对定位指你所定位的要素的位置相对于 它在文件中所分配的位置。例:

I { position: relative; left: 40px; top: 10px }

相对定位的关键在于定位了的要素的位置 是相对于它通常应在的位置进行定位。如 果你停止使用相对定位,则文字的显示位 置将恢复正常。

使用相对定位时要小心,否则容易将页面 弄得非常乱。

除了相对定位和绝对定位,你还可以使用 static(静止)参数值。它的使用方法同 普通HTML中的定位方法,不能附加特殊的 定位设置。

还不错吧?下面我们将学习如何控制定位 了的要素。

时间: 2024-09-22 22:15:15

css相对定位的相关文章

CSS相对定位的例子

让第二个div脱离文档流,向右下方移动,原来的空间会保留. html文件: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS相对定位的例子</title> <link rel="style

div+css相对定位和绝对定位用法实例详解

本文向大家介绍一下CSS relative相对定位的概念,如果对一个元素进行相对定位,它将出现在它所在的位置上. CSS relative相对定位 设置为相对定位的元素框会偏移某个距离.元素仍然保持其未定位前的形状,它原本所占的空间仍保留. CSS 相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动. 如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像

css学习笔记2

5.当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权.浏览器缺省设置外部样式表内部样式表(位于 <head> 标签内部)内联样式(在 HTML 元素内部)因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值).CSS 语法CSS 规则由两个主要的部分

CSS学习备忘录

如何引用CSS文件的内容 在一个CSS文件中,可以通过@import指令来引用另一个CSS文件,格式如下: @import url("被引用的CSS文件名"); 例如有a.css和b.css两个CSS文件,如果希望在a.css中使用b.css中的选择器,可在a.css文件中添加如下指令来完成: @import url("b.css"); 在html或者php文件中引用某个css文件时,可以在<style>标签中添加如下格式的语句: <style&g

CSS绝对定位的例子2

绝对定位,是指对该元素最近的那个脱离了标准流的元素定位:如果没有父元素(或有父元素,但父元素没有脱离标准流),则相对body左上角定位. html文件: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS绝对定位的例子

CSS绝对定位的例子1

让第二个div脱离文档流,向右下方移动,原来的空间不会保留. html文件: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS绝对定位的例子</title> <link rel="styl

CSS中相对/绝对之relative/absolute介绍

absolute属性配合left/top/right/bottom属性具有极强的定位性.这种功能特性是如此的明显与强烈,可能会让页面重构人员很单纯的被这一特性"捕获",而产生迷失. 一板一眼的描述可能难以理解,举个通俗点的例子吧: 一个脸蛋不错身材超好的姑娘穿上超PP的衣服后是如此的光艳动人,对于我们这类常年困居于深宅大院的光棍男来讲,这种美艳是如此的迷人,以至于我们的精力多集中在这沉鱼落雁的美貌上,而忽略了其他一些东西,例如知性,善良,贤惠等.很容易的,我们以后一想到此女子,第一反应

css 定位详解介绍带实例demo

CSS 相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动. 如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方.如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动.  代码如下 复制代码 #box_relative {   position: relative;   left: 30px;   t

HTML+CSS提升小实战

1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>几米简介</title> 5 <style type="text/css"> 6 *{ 7 margin:0px;padding:0px; 8 } 9 #header{ 10 ba