css样式中关于定位的问题

原创 2016年05月30日 23:40:44
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#demo1{
	position:relative;
	left:300px;
	top:100px;
	width:300px;
	height:200px;
	background-color:#F00;
}
#demo2{
	position:absolute;
	width:300px;
	height:200px;
	top:100px;
	left:100px;
	background-color:#300;
</style>
</head>

<body>
<div id="demo1">
<div id="demo2">
</div>
</div>

</body>
</html>



上面是两个div定位的问题,第一个div用relative 定位,第二个div元素基于第一个div定位,使用absolute定位,这里需要注意的是,第二个div元素基于第一个定位,必须被包含在第一个div元素中。

否则第二个div元素使用div无法实现其效果。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

踩坑路上——IOS Safari浏览器下固定定位position:fixed带来的问题与解决方案

1.-webkit-overflow-scroll:touch; 2.使用其他布局方式
  • grsghh
  • grsghh
  • 2017年03月11日 14:37
  • 5259

关于css样式 自适应和绝对定位 的一点理解

css 自适应 绝对定位

css样式-盒子、定位、背景色、尺寸

笔记7-13 1. css 1. 背景相关的颜色 body{ background-color: red; background-image: url(".....

Css样式详解--定位

1.基本概念: (1)定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 (2)div、h1 或 p 元素常常被称为块级元素...

css样式设计时快速定位bug的几个好方法

在DIV+CSS模板设计中,检测查找CSS中的BUG无疑是一件痛苦的事情,下面一些经验或许可以帮助你更快的找出CSS中的BUG并进行修补! 1、检查是否清除浮动 其实有不少的 CSS BUG 问题...

jQuery源码解析(4)—— css样式、定位属性

闲话 原计划是没有这篇博文的,研究animation源码的时候遇到了css样式这个拦路虎。比如jQuery支持“+=10”、“+=10px”定义一个属性的增量,但是有的属性设置时可以支持数字,有的必...

position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,

position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章...

CSS样式的定位

当元素没有position定位属性时,所有元素按照他们自己的定位标准进行定位,比如说:每一个div标签就占一行。 但是当元素我有了position属性,那么div原先占有一行的属性就被覆盖掉了(可以说...

css样式中的class,style与id的优先级问题

在写css样式的时候我们要注意的有顺序问题,更重要的时候style,class与id之间的优先级问题,在页面初次完工未经改变,或者页面复杂程度很小的时候,搞不清楚这三者之间的优先级问题,似乎并没有什么...

CSS样式 强制不换行 checkbox换行问题

CSS样式强制不换行  div{  white-space:nowrap;  }  自动换行  div{   word-wrap: break-word;   word-break: normal; ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css样式中关于定位的问题
举报原因:
原因补充:

(最多只允许输入30个字)