如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口

如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。

div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>

效果如下:

层模型--绝对定位(position:absolute)的更多相关文章

  1. 层模型--相对定位(position:relative)

    如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档流中的偏移位置.相对定位完成的过程 ...

  2. IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

    首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “&g ...

  3. 绝对定位position: absolute;

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. IE6 下绝对定位position:absolute 与浮动不显示 (IE6 下拉菜单显示)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD& ...

  5. 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  6. CSS层模型

    参考:慕课网 点此可进 如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作.CSS定义了一组定位(positioning)属性来支持层布局模型 ...

  7. 解决绝对定位div position: absolute 后面的<a> Link不能点击

    今天布局的时候,遇到一个bug,当DIV设置为绝对定位时,这个div后面的相对定位的层里面的<a>Link标签无法点击. 网上的解决方案是在绝对定位层里面添加:pointer-events ...

  8. position:absolute,绝对定位和相对定位,JQ隐藏和显示

    需要在指定位置,用绝对定位. 如果直接写position:absolute,top:0;left:0,那就是以浏览器的左上角为参照了 现在需要在某一个指定位置用绝对定位 解决方法 在需要用绝对定位(p ...

  9. position absolute 绝对定位 设置问题

     今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...

随机推荐

  1. ConcurrentHashMap的get、put、size

    ConcurrentHashMap的get操作 get操作的高效之处在于整个get过程不需要加锁,get方法里将要使用的共享变量都定义成volatile. ConcurrentHashMap的Put操 ...

  2. Haskell缩进规则

    Haskell也是使用缩进来表示一个表达式或者块延伸的范围的,这点与Python类似.Haskell的缩进规则简单总结起来只用下面三条:    1. 源文件中第一个顶级的定义或者声明的缩进,定义了该文 ...

  3. 14.6.3.1 The InnoDB Buffer Pool

    14.6.3.1 The InnoDB Buffer Pool InnoDB 保持一个存储区域被称为buffer pool 用于cache数据和索引在内存里, 知道InnoDB buffer pool ...

  4. 14.6.2 Configuring InnoDB for Read-Only Operation

    14.6.2 Configuring InnoDB for Read-Only Operation 配置InnoDB只读操作 你可以查询InnoDB 表MySQL 数据目录是一个只读介质,通过启用 - ...

  5. [LeetCode#204]Factorial Trailing Zeroes

    Problem: Description: Count the number of prime numbers less than a non-negative number, n. Analysis ...

  6. A configuration error occurred during startup. Please verify the preference field with the prompt: Cannot connect to vm

    1.报错图 解决方法: Window->Preferences->MyEclipse Enterprice Workbench->Servers->Tomcat->选择你 ...

  7. @repository注解

    Spring的注解形式:@Repository.@Service.@Controller,它们分别对应存储层Bean,业务层Bean,和展示层Bean. @Repository.@Service.@C ...

  8. 数据库的存储引擎和SQL语言

    数据库的存储引擎就是管理数据存储的东西,它完成下面的工作: 1)存储机制 2)索引方式 3)锁 4)等等 SQL语言:-----关系型数据库所使用的数据管理语言 1)数据定义语言(DDL):DROP. ...

  9. Screen-Space Bent Cones (SSBC) in Unity5

    噪音少.高度保留了纹理细节 博主近期渲染:最近用unity5弄的一些渲染 ---- by wolf96  http://blog.csdn.net/wolf96

  10. OpenStack Havana 部署在Ubuntu 12.04 Server 【OVS+GRE】(一)——控制节点的安装

      序:OpenStack Havana 部署在Ubuntu 12.04 Server [OVS+GRE] 控制节点: 1.准备Ubuntu 安装好Ubuntu12.04 server 64bits后 ...