position的四种取值 :
static:static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定
relative:relative 就是相对元素static定位时的位置进行偏移,如果指定static时top是50象素,那么指定relative并指定top是10象素时,元素实际top就是60象素了。
absolute:absolute绝对定位,直接指定top、left、right、bottom。有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢,容器就是离元素最近的一个定位好的“祖先”,定位好的意思就是其Position是absolute或fixed或relative。如果没有这个容器,那就使用浏览器初始的,也就是body或者html元素。标准是说只需要指定left和right,width可以自动根据容器宽度计算出来,可惜ie不支持。
fixed:fixed才是真正的绝对定位,其位置永远相对浏览器位置来计算。而且就算用户滚动页面,元素位置也能相对浏览器保持不变,也就是说永远可以看到,这个做一些彩单的时候可以用。可惜的是ie还不支持
relative,absolute,fixed需要指定具体位置
relative,absolute,fixed如果不指定它的top,left等属性,那么它的position实际上依然是static。使用了relative,absolute,fixed就必须指定具体的位置。
<html >
<head>
<meta http-equiv="content-type" content="text/html" charset="gb2312">
<style> *{margin:0;padding:0} </style>
</head>
<body>
<div style="position:absolute;height:400px;width:400px;background:yellow;left:80px;top:80px;">
<div style="position:absolute;height:200px;width:200px;background:red;left:100px;top:80px;"></div>
<div style="position:relative;height:200px;width:200px;background:blue;left:186px;top:186px;"></div>
<div style="position:fixed;height:140px;width:140px;background:black;left:20px;top:20px;"></div>
<!--黑色(black)的是fixed的,所以它直接以浏览器窗口开始计算left和top的值
红色(red)和蓝色(blue)分别是absolute和relative他们都是从父对象开始计算left和top的值,
只是因为有一个是absolute所以产生了重叠效果,没有被另外一个挤走。
-->
</div>
<div style="position:static;height:140px;width:140px;background:brown;left:220px;top:220px;"></div>
<!--紫色(brown)的是static的,所以它的left和top没有起作用,一直跑到最上面去了
同时我也明白了另外一个道理,因为默认的类型都是static,所以当我们的页面长度等定位的不合理时一个会把一个挤走。
-->
</body>
</html>
有时候我们需要针对某一个容器的悬浮效果,而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。我一开始也无能为力,后来发现只要把其上一级的样式属性 position设置为relative就可以了。
也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。
例如如下A-B的嵌套结构
<div id="A">
<div id="B">
</div>
</div>
有时候我们需要针对某一个容器的悬浮效果,这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。只要把其上一级的样式属性 position设置为relative就可以了。
也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。
例如如下A-B的嵌套结构
<div id="A">
<div id="B">
</div>
</div>
当A的position为relative时,B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档,而是针对id为A的这个div了。
<img> 都有width属性,如img.width 值没有px 但style.width 是有px的,必须用parseInt去除,不然会报错,当<img>定义了固定宽度时,可用var image = new Image();
image.src = img.src;得到原图像的原大小
<html >
<head>
<meta http-equiv="content-type" content="text/html" charset="gb2312">
<style> *{margin:0;padding:0} </style>
</head>
<body>
<div id="Canvas" style="background-color:#cccccc;height:266px;width:284px">
<table id="Crop" cellpadding="0" cellspacing="0" border="0" style="border: 1px solid green">
<tr>
<td style="height: 107px" colspan="3" class="Overlay"></td>
</tr>
<tr>
<td style="width: 105px" class="Overlay"></td>
<td style="width: 90px; height: 60px; border-width: 1px; border-style: solid; border-color: white;"></td>
<td style="width: 105px" class="Overlay"></td>
</tr>
<tr>
<td style="height: 107px" colspan="3" class="Overlay"></td>
</tr>
</table>
<div style="position: relative;background-color:green; left:0; top: 0; border: 1px solid red" id="IconContainer">
<img id="icon" src="1.gif" style="border-width: 0px; position: relative; left: 0px; top: 0px">
</div>
<div style="position: relative;background-color:red; left:16; top:16">fdsadsa</div>
</div>
<script type="text/javascript">
<!--
var canva = document.getElementById("Canvas");
var obj = document.getElementById("icon");
var image = new Image();
image.src = obj.src;
alert(canva.style.width) //284
alert(image.width) //28
alert(obj.width); //28
alert(obj.style.width); //
obj.style.left = (parseInt(canva.style.width) - image.width )/2 + "px";
obj.style.top = -(parseInt(canva.style.height) + image.height)/2 + "px";
//-->
<!--
图片居中,这类问题一般都是算两者的width和height,再求left和top,都要求(最好放一起),position设为relative ,相对自己在父元素的原始位置的位移,向右下角移动为正
-->
</script>
</body>
</html>
分享到:
相关推荐
position属性有几个值:static、relative、absolute、fixed以及最近添加的sticky。 1. static:这是position属性的默认值。表示元素按照常规文档流进行布局。不进行特别的定位处理,所有的元素都按照HTML中的顺序...
其中,CSS position 属性可以取5种值:position: absoluteposition: relativeposition: fixedposition: staticposition: inheritstatic 是 position 默认的属性值。任何应用了 position:static 的元素都处于常规文档...
`(下划线前缀)可能在IE6中生效,而其他浏览器忽略这个属性。但这种方法不推荐,因为其可维护性和兼容性差。 5. **使用条件类名**: 在HTML中给body添加一个特定的类名,如`<body class="ie6">`,然后在CSS中通过...
CSS背景属性主要包括以下几个方面: 1. **`background-color`**:设置元素的背景颜色。 2. **`background-image`**:设置作为背景的图片。 3. **`background-repeat`**:定义背景图像是否以及如何重复。 4. **`...
### CSS `position` 属性详解 #### 一、引言 在网页布局中,`position` 属性是非常重要的一个概念,它控制了元素在页面上的定位方式。通过不同的定位值,我们可以实现各种复杂的布局效果。本文将详细介绍 `...
3. `[attr~=value]`:选择`attr`属性值中包含空格分隔的`value`单词的元素。 4. `[attr|=value]`:选择`attr`属性值以`value`开头,且可能后跟连字符(-)的元素,主要用于语言属性的选取。 5. `[attr^=value]`:选择`...
在互联网早期,Internet Explorer 6 (IE6) 是一个广泛使用的浏览器,但它的CSS支持并不完善,特别是对于`position: fixed`属性。`position: fixed`在现代浏览器中用于创建固定定位元素,使得元素相对于视口...
这些属性分为几大类:盒子模型、颜色和背景、样式、文字样式及文本属性等。 #### 三、对照表详解 ##### 3.1 盒子模型 | CSS 属性 | 描述 | JS 属性 | |-------------------|------------------------------------...
作者简单介绍了几个常见的数据类型,如长度单位、颜色、百分比等,帮助读者理解CSS属性值的定义语法。同时,书中还讨论了CSS全局关键字,如`inherit`、`initial`、`unset`和`revert`,这些关键字在处理继承和重置...
`position`属性是CSS中的一个关键概念,它决定了元素在页面上的定位方式。当内层DIV设置`position: absolute;`时,其定位会受到外层DIV的`position`属性的影响。 首先,我们来理解一下CSS中的`position`属性。`...
每张图片的属性值都应与 `background-image` 中对应的图片一一对应。 除了静态图片,CSS3还引入了背景渐变的概念。线性渐变(`linear-gradient`)允许你创建从一种颜色平滑过渡到另一种颜色的效果,而径向渐变(`...
在CSS世界里,`position`属性是一个至关重要的样式规则,用于定义元素的定位方式。它提供了多种定位选项,包括`static`、`relative`、`absolute`、`fixed`、`inherit`以及我们今天要深入探讨的`sticky`。`position: ...
### CSS中的Z-Index属性详解 #### 一、引言 在网页布局设计中,元素之间的堆叠顺序是非常重要的一个方面。特别是在复杂的页面结构中,如何控制这些元素的前后顺序,确保用户能够按照设计师的意图浏览信息,是前端...
这个压缩包文件"收藏的几个经典的css样式表示例"显然包含了几个使用CSS实现的独特设计技巧。下面我们将深入探讨其中可能涉及的知识点,特别是关于“纯css实现的圆角、山顶角”的部分。 首先,我们来讨论CSS中的圆角...
每个属性都有对应的值,如`color`属性可以设置文本颜色,`font-size`可以设定字体大小。CSS 2.0中的常见属性包括: - `color`:文本颜色。 - `background-color`:背景颜色。 - `font-family`:指定字体。 - `...
与`position`相关的还有几个属性: - `left`: 设置对象相对于最近一个定位对象的左边界的位置; - `top`: 设置对象相对于最近一个定位对象的上边界的位置; - `right`: 设置对象相对于最近一个定位对象的右边界...
这个“CSS实现的几个非常漂亮的按钮.rar”压缩包中,很显然包含了利用CSS创建各种美观、吸引用户的按钮的示例代码。这些按钮不仅提升了用户体验,也对网页的整体视觉效果起到了关键作用。下面我们将深入探讨如何利用...
下面将详细介绍CSS中的几个关键背景属性。 **1.2 `background` - 综合背景属性** - **描述**: `background` 是一个综合性的属性,它允许开发者一次性设置多个背景相关的子属性。这对于简化代码、提高开发效率非常...
本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS`样式示例,特别是3D按钮和层模拟窗口移动的效果,这些都是现代网页设计中非常流行和实用的元素。 首先,3D按钮是提升网页界面视觉吸引力的重要元素。在CSS3的...
本文主要探讨了`position`属性的几个重要值:`static`、`absolute`、`relative`和`fixed`,以及如何结合使用它们来实现复杂的布局。 1. `position: static` 这是`position`属性的默认值,元素按照正常的文档流排列...