做弹出框，拖动效果都要充分利用css中的position属性。
背景
网页中的元素是一种流媒体，默认情况下一个接一个的展现，如果要改变他们的位置，就需要使用定位属性-----position;
原则：寻找参照物
position:
默认值是static;可以省略,top left bottom right z-index都不能用
relative;元素相对于它static时候的定位偏移，而且他static时刻占用的空间还是存在的
参照物：static时的元素位置
absolute:元素脱离文档流。定位是相对于父级对象中存在定位属性的。
参照物：第一个有定位属性(absolute;relative;fixed)的父元素位置；
fixed:
inherit:
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<div style="width:200px;height:300px;background-color:blue;position:static;top:30px">
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
</div>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
</html>
分享到：
相关推荐
在CSS中，`background-position`属性是一个非常重要的部分，它控制着背景图像在元素内的位置。这个属性允许我们精确地定位背景图像，从而实现各种视觉效果。 批量输出`background-position`属性的定位像素值通常是...
CSS 列表属性 - list-style-position 属性详解 在 CSS 中，列表属性 play 一个非常重要的角色，因为它们可以帮助我们更好地控制列表的样式。今天，我们将要探讨的就是 list-style-position 属性，该属性可以控制...
在网页设计中，CSS（层叠样式表）的position属性是至关重要的，它决定了元素在页面上的布局方式。本文将详细解析CSS-position的五个主要值：static、relative、fixed、absolute和sticky，以及它们在实际应用中的重叠...
CSS background-position 属性定位图片 在 CSS 中，background-position 属性是设置背景图像的起始位置的属性。今天，我们来讨论这个属性的定义、用法和效果。 定义 background-position 属性设置背景图像的起始...
在CSS世界中，`background-position`是一个至关重要的属性，它允许我们精确地控制背景图像在元素内的位置。这个属性在网页设计中广泛应用，用于创建各种视觉效果，如图像滑动、定位图标等。本篇文章将深入探讨`...
`background-position`属性是实现这一目标的关键，它允许我们通过坐标系统来调整背景图像相对于元素的位置。下面我们将详细探讨`background-position`的用法及其背后的算法。 首先，`background-position`属性可以...
CSS中的position属性用于指定元素在文档流中的定位方式，它决定了元素在页面上的布局和交互方式。position属性包含四个可能的值：static、fixed、relative、absolute，下面逐一详细说明。 1. static定位：这是...
css 之 background-position-x 是 CSS 中的一个属性，用于设置背景图片的水平位置。这个属性是 background-position 属性的简写形式，专门用于设置背景图片的水平位置。 背景图片的水平位置是指背景图片左上角相...
在CSS中，我们使用`background`属性或者其子属性（如`background-image`、`background-size`、`background-position`、`background-repeat`）来设置背景视频。其中，`background-size`用于控制视频的大小，`...
CSS中的background-position属性用于设置或检索对象的背景图像位置。要使用这个属性，必须先通过background-image属性指定了一个背景图片。background-position属性的位置定位不会受到对象的padding（内边距）属性...
在CSS布局中，`position`属性是至关重要的，它决定了元素在页面上的定位方式。`position`有四个主要的值：`static`、`fixed`、`relative`和`absolute`，还有一个较新的值`sticky`，不过在这里我们主要讨论前四个。 ...
"CSS 列表属性：list-style-image 和 list-style-position" CSS 列表属性是 CSS 中的一种样式属性，用于控制列表的样式和布局。本文主要介绍了 list-style-image 和 list-style-position 两个属性的用法和应用。 ...
3. **list-style-position属性**： 此属性决定了列表项目符号与文本之间的相对位置。它有两个可能的值： - **inside**：列表项目符号放置在文本内部，紧贴着文本。这意味着符号会受到文本的缩进影响，如果设置了`...
在网页布局中，`position`属性是CSS（层叠样式表）中至关重要的一部分，它用于定义元素在页面上的定位方式。`position`属性允许开发者精确控制元素的位置，从而实现复杂和动态的布局效果。本教程将深入探讨`position...
背景图定位主要依赖于CSS的`background-image`、`background-repeat`、`background-position`和`background-size`属性。`background-image`用于设置元素的背景图像，可以是一个URL指向的图片或使用CSS渐变。例如： ...
本文将详细解析`background-position`这个CSS属性，以及如何使用它来控制网页背景图片的位置。 `background-position`属性允许我们指定背景图片在元素内的位置。它接受多种不同的值，如百分比、像素、关键词（如`...