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无法实现其效果。

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

HTML&CSS精选笔记_盒子模型

盒子模型 认识盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(mar...
  • xiaoye142034
  • xiaoye142034
  • 2017年07月18日 17:42
  • 403

css样式定位属性之绝对定位的利用

css样式绝对定位的利用:页眉页脚和多栏布局以及配合javascript的弹出广告制作...
  • liu659_
  • liu659_
  • 2017年12月13日 13:47
  • 73

第二节点习题

 HTML第2阶段实训前的测验 选择题 1. 实现背景平铺效果,对应的CSS为( A  )(选择一项) ...
  • qq_34216631
  • qq_34216631
  • 2017年11月25日 21:27
  • 91

15、关于元素CSS函数的封装,可用于获取和设置元素的CSS样式

1、关于元素CSS函数的封装,可用于获取和设置元素的CSS样式 CSS样式的获取和设置 #div1 { width: 100px; hei...
  • zbw18297786698
  • zbw18297786698
  • 2016年05月21日 17:41
  • 1037

CSS样式定位

CSS样式定位 /*绝对定位:以网页坐标系为基准进行定位*/ #box-abs{ ...
  • qq_34416191
  • qq_34416191
  • 2016年06月12日 16:17
  • 198

测试如何定位问题

今天上午发现的,最后8个port在921600出现Error的问题, 可以先不急着报Bug,再从以下方面来进一步定位问题: 1.      确保接线是OK的:如果是自己按照我们的Wiki总结的...
  • amy0428
  • amy0428
  • 2014年05月12日 11:38
  • 1225

CSS样式的定位

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

关于产品推荐的10个问题

许多零售商使用自动的产品推荐技术来增加他们的销售额和转化率。这些推荐的物品通常是商业站点上动态生成的,通常基于特定客户或一组客户的购买习惯。 Strands Recommender 是一个领先的...
  • ozhaohuafei
  • ozhaohuafei
  • 2014年07月05日 19:58
  • 1785

关于页面CSS样式问题

页面应用样式的方法主要有三种:style,class,id。 三者可以同时使用,优先级分别是style>class>id。所以在开发时发现提供的CSS样式不能完全符合个人需求时,可以使用style定...
  • u012919352
  • u012919352
  • 2017年04月26日 09:56
  • 127

CSS position 定位知识细节

CSS position 定位知识细节
  • Dong_PT
  • Dong_PT
  • 2016年04月09日 22:03
  • 709
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css样式中关于定位的问题
举报原因:
原因补充:

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