<!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. ASP.NET MVC中分析淘宝网页发生乱码标题搞定方法

    ASP.NET MVC中分析淘宝网页发生乱码标题搞定方法 近来正在分析淘宝中商品的信息,效果发生乱码,如: 原因便是中文字符格式发生冲突,ASP.NET MVC 默认采用utf-8,可是淘宝网页采用g ...

  2. HDU 5033 Building --离线+单调栈

    题意:给一些建筑物,x表示横坐标,h表示高度,然后查询某些坐标x,问从该点看向天空的最大张角是多大. 解法:离线操作,读入所有数据,然后按x升序排序,对每一个查询的x,先从左到右,依次添加x坐标小于x ...

  3. 为VS集成IL环境

    为VS2012集成IL工具 在之前的版本VS2010中,在VS的安装目录下/Tools/IL Disassembler这个工具(IL中间语言查看器),但是我想直接把它集成在VS2012里使用, 操作方 ...

  4. AutoIT简介

    AutoIT最初是为了帮助IT管理和维护而开发的工具,能自动完成软件的安装.由于自动化安装和自动化测试在功能需求上有许多相似之处,都要模拟用户对软件进行操作,并验证执行的结果,所以,AutoIT逐渐成 ...

  5. lcx转发 【解决内网没法链接3389 的问题】

    要求我自己在外网 然后监听1111端口,将1111端口数据流量转发至2222端口 被入侵主机上 将本地的2222端[愿3389 主机修改了远程连接的端口]口流量转发至外网ip的1111端口 2222为 ...

  6. mybatis order by绑定的参数

    <select id = "queryByStartWithOrder" resultType="org.seckill.entity.SuccessKilled& ...

  7. （转）轻量级JS焦点图/轮换图myFocus V2源码下载及安装教程

    myFocus是一个专注于焦点图/轮换图制作的JS库,它小巧而且是完全独立的JS库,用它可以轻松的制作出网上绝大部分常见的焦点图(甚至包括flash焦点图),而且制作出的焦点图体积也非常的小(1KB左 ...

  8. Ubuntu安装JDK与配置环境变量

    Ubuntu14.04安装JDK与配置环境变量 工具/原料   Ubuntu14.04系统 方法/步骤     先从Oracle官网下载JDK.先选择同意按钮,然后根据自己的系统下载相应版本.我的系统 ...

  9. js常用宽高属性

    document.body.clientWidth //body对象的宽度 document.body.clientHeight //body对象的高度 document.documentElemen ...

  10. onresize方法

    resize()方法可以写在当前页面包含的所有js里