<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<style>

*{

	margin:0;

	padding:0;

}

html,body,#wrap{

	width:100%;

	height:100%;

}

#wrap{

	background:#09F;

	position:relative;

}

#wrap .overflow{

	position:absolute;

	left:50px;

	top:50px;

	right:50px;

	bottom:50px;

	background:#999;

}

</style>

<body>

<div id="wrap">

	<div class="overflow">

    //有时候你要让某个元素宽或者高100%的时候，里面的元素你完全可以使用定位[left,right,top,bottom]，定到某个位置,而不是使用window.onreize;

    </div>

</div>

</body>

</html>

　　

百分比定位加position定位的常用布局的更多相关文章

  1. CSS position 属性_css中常用position定位属性介绍

    css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种: 1.static(静态定位): 这个是元素的默认定 ...

  2. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  3. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  4. position 定位

    position属性是指本体相对于上级的定位,position又分绝对定位和相对定位.他的默认值是static,意味着元素没有被定位,出现在文档流中应该出现的位置.如果用position来布局页面,父 ...

  5. 浅析CSS——元素重叠及position定位的z-index顺序

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

  6. 元素重叠及position定位的z-index顺序

    元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用cs ...

  7. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  8. 盒子模型&position定位

    有时候深深的感觉语文这门课程其实很有用, 至少以前学的时候没有感觉到 直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之:认真阅读小心品味 当然,前面的孤言自语和本文无关,只是 ...

  9. 归纳篇（一）CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

随机推荐

  1. 【jQuery Demo】jQuery打造动态下滑菜单

    作者:漫凯维奇      来源:[教程]jQuery打造动态下滑菜单 Tip:这只是一个转载,源代码可以在上面的来源博文中下载 此教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单.效果如 ...

  2. fontAwesome代替网页icon小图标

    引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...

  3. maven 多工程搭建演示

    maven出现后,很多公司会用maven来构建项目,单仅仅只是单项目单工程的 并没有使用多工程来构建,这样在以后,项目越来越大,业务越来越多以后,项目会难以维护,越发庞大,维护成本提高,团队士气也会下 ...

  4. 使用PS3手柄在PC玩Unity3D游戏

    PS3手柄玩Unity游戏 今天把公司的PS3手柄接到PC上,想用手柄试一下玩赛车的感觉,老感觉用键盘按键玩的不爽. 把PS3的手柄接到PC上之后,系统提示正在安装驱动--,百度找资料,如何在PC上使 ...

  5. android studio 中的编码问题

    在 Android studio 中直接创建项目和导入其他项目都会有一个文件编码设定的问题,在 android studio (version 1.2.0)中设置文件的编码,只需要两步: 1.打开Se ...

  6. Android Activity的生命周期

    一.为什么要了解Activity的生命周期 activity is directly affected by its association withother activities, its tas ...

  7. Spring Mvc 在非controller层 实现获取request对象

    一般我们在Controller层,会编写类似这样的方法 @Controller @RequestMapping(value="/detail") public class GetU ...

  8. 安装grunt

    1,npm install -g grunt-cli 2,npm install grunt --save 作为项目的依赖安装 这两步必不可少

  9. Dottrace跟踪代码执行时间

    当自己程序遇到性能问题,比如请求反应缓慢,怎么分析是哪里出了问题呢?dottrace可以帮助.net程序跟踪出代码里每个方法的执行时间,这样让我们更清晰的看出是哪里执行时间过长,然后再分析应该怎样解决 ...

  10. python 3 安装 scrapy 并运行成功

    今天,python 3 安装 scrapy, 并运行成功.特此纪念! 我的环境:windows 10(64位) + python 3.5.2(64位) 其中几个要点说明一下: 1.有几个依赖库需要事先 ...