1.position 属性
用于设置页面元素的位置，
可以指定下几个值:
1) static: static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定，以DIV做root节点为例：
<head>
<style type="text/css">
div#root
{
width:200px;
height:200px;
background-color: #E0E0E0;
}
div#c1
{
position:static;
width:50px;
height:50px;
background-color: #FF9797;
}
div#c2
{
position:static;
width:50px;
height:50px;
background-color: #C1FFE4;
}
</style>
</head>
<body>
<div id="root">
<div id="c1">c1</div>
<div id="c2">c2</div>
</div>
</body>
效果如下：
position为static，则元素以流形式出现（在下看来好像是竖着接起来），当然，要结合容器父子关系。
2).relative:relative 就是当前元素相对于上一个同级元素（若有）position为static时的位置，或者是直接父容器的当前位置而言（若无同级元素），
请看码：
<head>
<style type="text/css">
div#root
{
width:200px;
height:300px;
background-color: #E0E0E0;
}
div#c1
{
position: static;
top:10px; //对于static而言，指定top，left等似乎毫无用处
width:100px;
height:100px;
background-color: #FF9797;
}
div#c2
{
position: static;
top:10px; //对于static而言，指定top，left等似乎毫无用处
width:100px;
height:100px;
background-color: #C1FFE4;
}
div#c2_1
{
position: relative;
top:10px;
width:45px;
height:45px;
background-color: #FFFF6F;
}
div#c3
{
position:relative;
top:10px;
left:20px;
width:100px;
height:100px;
background-color: #ACD6FF;
}
div#c3_1
{
position:relative;
top:10px;
left:10px;
width:45px;
height:45px;
background-color: #FFFF6F;
border-bottom: 1px solid #000000;
}
div#c3_2
{
position:relative;
top:10px;
left:10px;
width:45px;
height:45px;
background-color: #FFFF6F;
border-bottom: 1px solid #000000;
}
</style>
</head>
<body>
<div id="root">
<div id="c1">c1
</div>
<div id="c2">c2
<div id="c2_1" >c2_1</div>
</div>
<div id="c3">
<div id="c3_1" >c3_1</div>
<div id="c3_2" >c3_2</div>
</div>
</div>
</body>
效果如下：
对于C2_1而言，它有上一个同级元素c2字符串，指定top为10px，则其意为c2_1的top离c2字符串10px；
对于c3而言，它有上一个同级元素c2，与c2_1类似。
对于c3_1,它没有同级元素，所以top：10px；left：10px；是相对于c3当前位置而言(建议改div#c3里的position为static试一试)， 而对于c3_2，它有上一个同级元素c3_1，其top：10px；left：10px；是相对于c3_1 position指定为static时的位置而言的，但又由于position为static时top：10px；left：10px；根本无效（相当于top：0px；left：0px；），所以变成上图情况。
3）absolute，absolute绝对定位，“绝对”是对比relative而言来说的，绝对定位是相对于其定位好的（position指定除static以外的值）上一级父容器（一级一级上），如果没有这个容器，那就使用浏览器初始的，也就是body或者html元素，绝对定位不用看同级的元素。
打码如下：
<head>
<style type="text/css">
body
{
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
div#root
{
position: static; //父div position 为static 或干脆不指定时，就不能称其为 “定位好的”
width:200px;
height:300px;
background-color: #E0E0E0;
}
div#c1
{
position: absolute;
top : 10px;
width:100px;
height:100px;
background-color: #FF9797;
}
</style>
</head>
<body>
<div id="root">
<div id="c1">c1
</div>
</div>
</body>
c1的直接父容器是root，但root不是定位好的，在往上就是body，但body也是没有明确定位的，所以此处c1的定位好的父容器没有，因此此处c1的top：10px只能相对于<html>元素而言：
由上图示例看出，c1没看root 和body的脸色（因为定位不明确），而直接向<html>看齐。若给body或则root指定position除static以外的值，c1的top：10px是相对于做了明确定位的body或root来说的，结果如下：
4)fixed, fixed才是真正的绝对定位，其位置永远相对浏览器位置来计算。
将上面absolute的代码修改一下，div#root和div#c1如下：
div#root
{
position: absolute;
top :40px;
width: 200px;
height: 300px;
background-color: #E0E0E0;
}
div#c1
{
position: fixed;
top:35px;
left:35px;
width:100px;
height:100px;
background-color: #FF9797;
}
相关推荐
CSS提供了多种布局方式，包括流体布局（使用百分比定义元素尺寸，自适应屏幕大小）、定位布局（使用`position`属性，如`static`、`relative`、`absolute`和`fixed`）、Flex布局（弹性盒子，适用于一维布局）以及Grid...
### 韩顺平 DIV+CSS 超级详细笔记 #### 一、初识CSS **HTML文档结构** 在了解CSS之前，我们先要熟悉HTML文档的基本结构。一个典型的HTML文档由`<!DOCTYPE html>`（文档类型声明）、`<html>`标签、`<head>`部分和`...
定位——position1.基本概念2.静态定位——static3.固定定位——Fixed Positioning4.相对定位——Relative Position5. 绝对定位——Absolute Position6.自我总结，代码效果 一.显示属性——display 1.块元素—
列表图像和位置—— List Image and Position3.列表样式（快速标记）——list-style二.样式表——Styling the Tables1.表属性——Tables Properties2.标题设置——caption-side2.空白单元格设置——empty-cells3....
【PHP课程笔记——HTML篇】 HTML（HyperText Markup Language）是一种标记语言，是网页制作的基础。韩顺平老师的PHP课程中，HTML部分主要讲解了以下几个关键知识点： 1. **HTML结构**：HTML文档通常由<!DOCTYPE>...
**jQuery学习笔记——属性大全** 在JavaScript的世界里，jQuery是一个非常流行且强大的库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本笔记将深入探讨jQuery中的核心属性，帮助开发者快速掌握和...
### 学习标准——笔记 #### 一、CSS布局技巧与注意事项 1. **对象具有浮动属性时的宽度处理：** - 当一个HTML元素（如`<div>`）设置了`float`属性后，该元素将脱离文档流，并且不再占据原来的位置空间。因此，在...
5. **背景和边框**：使用`background-image`、`background-size`、`background-position`等属性，可以为展示柜添加有层次感的背景。而`border-radius`则可以创建圆角效果，增强视觉吸引力。 6. **阴影效果**：`box-...
然后，使用jQuery的`animate`方法配合CSS3的`transform`属性，按照实际的时间比例改变指针的角度。为了实现持续的动画效果，我们可以使用`setInterval`函数定期更新时间并重绘时钟。 在`js`文件中，我们可能看到...
【CSS3紫色菱形图案背景特效】是一种在网页设计中常用的技术，用于为网页元素创建独特、引人注目的视觉效果。CSS3是层叠样式表（Cascading Style Sheets）的第三版，它引入了许多新的功能和特性，极大地扩展了网页...
本篇将详细探讨一个特别吸引人的特效——“油漆辊粉刷动画”，该特效是通过CSS3实现的，能够为网页增添动态和趣味性，让用户体验更上一层楼。在实际项目中，这种效果可以用于背景填充、过渡动画等场景，提升网站的...
本资源“纯CSS3绘制彩虹点动画变体特效.rar”提供了一种利用CSS3技术实现的独特视觉效果——彩虹点动画变体特效。这个特效能够为网页增添动态和色彩，吸引用户的注意力，提升用户体验。以下将详细介绍如何使用CSS3来...
1. **CSS3定位技术**：悬浮球的定位通常会用到绝对定位（`position: absolute`），这允许元素相对于最近的非静态定位祖先元素进行定位。当球体靠近页面边缘时，我们需要通过JavaScript来实时调整其位置，使其贴边。 ...
此外，通过CSS的position和transform属性，可以调整文字的位置和动态轨迹，使得流星效果更具真实感。 "jQuery白云流星卡通字体特效"的实现通常包括以下几个步骤： 1. 引入jQuery库：确保HTML文件中包含了jQuery库...
总结来说，"右侧导航浮动框"的实现涉及了前端开发中的核心技能——CSS布局和JavaScript交互。通过不断优化代码，我们可以创建出既美观又高效的功能性导航，提升用户体验。在实际项目中，这一步骤往往是迭代和改进的...
例如，可以通过设置元素的`display`属性为`none`，在初始状态下隐藏文字，然后通过JavaScript改变这个属性，配合jQuery的动画方法，实现文字的动态显示。 ```css #textArea { position: relative; /* 控制文字位置...
5. **布局技术**：CSS提供了多种布局方式，如浮动(float)、定位(position)、Flexbox（弹性盒布局）和Grid（网格布局）。这些技术可以用来创建复杂的页面结构。 6. **响应式设计**：随着移动设备的普及，响应式设计...
这个压缩包包含一个名为"jiaoben8319"的文件，很可能是源代码或者示例项目的文件夹，用于实现一种互动的网页特效——当鼠标移动时，屏幕上的圆点会根据光标的移动轨迹分散并跟随，为网页增加视觉吸引力。 首先，...
近在学习《高性能网站建设指南》这本书，本文算是一个学习笔记，将学到的东西进行整理一下，方便后面查看。... 利用css sprites将网站用到的图片合并成一张图片，通过background-position、width