值 描述
absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。(简单情况下相对于浏览器窗口)
fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

<html>
<head>
<style type="text/css">
.text{
position:relative;
top:30px;
left:40px;
}
.testspan{
position:relative;
top:30px;
left:20px;
}
</style>
</head>
<body>
<table border="1">
<td width="100" height="100"><span class="text">button1</span></td>
<td>
<input type="hidden" id="abc">
<div style="width:50"></div>
<span class="testspan">
<input type="button" class="button1" value="click">
</span>
</td>
</table>
</body>
</html>

css-position的更多相关文章

  1. css position的使用

    css position的使用 css 的 position 属性是用来设置元素的位置的,它还能设置一个元素出现在另一个元素的下层元素能用 top,bottom,left 和 right 属性设置位置 ...

  2. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  3. jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position

    定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...

  4. [CSS]position定位

    CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元 ...

  5. jQuery css,position,offset,scrollTop,scrollLeft用法

    jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...

  6. CSS position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  7. CSS position &居中（水平，垂直）

    css position是个很重要的知识点: 知乎Header部分: 知乎Header-inner部分: position属性值: fixed:生成绝对定位的元素,相对浏览器窗口进行定位(位置可通过: ...

  8. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  9. 前端开发必知必会：CSS Position 全解析

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

  10. jquery 获取css position的值

      jquery 获取css position的值 CreateTime--2018年5月28日14:03:12 Author:Marydon 1.情景展示 <div id="aa&q ...

随机推荐

  1. js实现下滑加载更多的效果

    var stop=true;$(window).scroll(function(){ totalheight = parseFloat($(window).height()) + parseFloat ...

  2. tomcat由浅入深

    零.服务器.Servlet容器.web容器 Servlet容器:能够运行Servlet的环境叫做Servlet容器 web容器:能够运行web应用的环境就叫做web容器 weblogic websph ...

  3. JMeter学习（三十四）测试报告优化

    如果按JMeter默认设置,生成报告如下: 从上图可以看出,结果信息比较简单,对于运行成功的case,还可以将就用着.但对于跑失败的case,就只有一行assert错误信息.(信息量太少了,比较难找到 ...

  4. Oracle 遇到的问题 （1）

    1.ORA-01502:索引'DBEPMS.SYS_C009390'或这类索引的分区处于不可用状态 解决方法:[注 索引命名规则 IX_表名简称_列名简称/IX_表名简称_序号(索引长度在30字符以内 ...

  5. Emmet使用之HTML

    前言 前段时间在网上发现一个强大的好玩的东西,emmet,它可以方便我们前端开发者快速编写html和css.可以算是前端开发必备的一款利器,今天先总结一下用emmet写html,有时间再总结下css的 ...

  6. 总结ThinkPHP使用技巧经验分享(一)

    约定:1.所有类库文件必须使用.class.php作为文件后缀,并且类名和文件名保持一致2.控制器的类名以Action为后 缀3.模型的类名以Model为后缀,类名第一个字母须大写4.数据库表名全部采 ...

  7. Generate Ubuntu Install Media On Mac

    Opps, my computer system was broken again... Let's repire it. Introduction The system of my PC is br ...

  8. Python快速建站系列-Part.Five.3-个人主页及资料页面

    |版权声明:本文为博主原创文章,未经博主允许不得转载. 第五部分最后一节,完成个人主页里资料页面的个人资料的展示和修改功能,不过毕竟功能比较少,个人资料其实只有昵称一项,手动滑稽. 一如既往先写出来u ...

  9. VB.NET中Form窗体运行时，按ESC退出全屏状态

    1.在其KeyDown事件添加: If e.KeyValue = 27 Then Me.FormBorderStyle = Windows.Forms.FormBorderStyle.Sizable ...

  10. lisp等