百分比定位加position定位的常用布局
<!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定位的常用布局的更多相关文章
- CSS position 属性_css中常用position定位属性介绍
css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种: 1.static(静态定位): 这个是元素的默认定 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- position 定位
position属性是指本体相对于上级的定位,position又分绝对定位和相对定位.他的默认值是static,意味着元素没有被定位,出现在文档流中应该出现的位置.如果用position来布局页面,父 ...
- 浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- 元素重叠及position定位的z-index顺序
元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用cs ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- 盒子模型&position定位
有时候深深的感觉语文这门课程其实很有用, 至少以前学的时候没有感觉到 直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之:认真阅读小心品味 当然,前面的孤言自语和本文无关,只是 ...
- 归纳篇（一）CSS的position定位和float浮动
近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...
随机推荐
- 用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)
本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.a ...
- 【Ext.Net学习笔记】03：Ext.Net DirectEvents用法详解、DirectMethods用法详解
Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...
- JAVASE笔记回顾
第一部分,JAVA基础和面向对象 part01 入门与开发环境搭建 1: 计算机基础知识(了解)(1)计算机(2)计算机硬件(3)计算机软件系统软件:windows,linux,mac应用软件:QQ, ...
- 2014 Super Training #1 B Fix 状压DP
原题: HDU 3362 http://acm.hdu.edu.cn/showproblem.php?pid=3362 开始准备贪心搞,结果发现太难了,一直都没做出来.后来才知道要用状压DP. 题意: ...
- spring,hibernate,struts的面试笔试题
1 Action是不是线程安全的?如果不是 有什么方式可以保证Action的线程安全?如果是,说明原因不是声明局部变量,或者扩展RequestProcessor,让每次都创建一个Action,或者在s ...
- java 8-6 抽象的练习
1. 猫狗案例 具体事物:猫,狗 共性:姓名,年龄,吃饭 分析:从具体到抽象 猫: 成员变量:姓名,年龄 构造方法:无参,带参 成员方法:吃饭(猫吃鱼) 狗: 成员变量:姓名,年龄 构造方法:无参,带 ...
- Rdlc报表出现空白页解决方法（转）
在使用RDLC报表时,碰到这种情况:当只有一页数据时,报表确显示两页,第二页除了报表头之外数据为空.然后,当有多页数据时,最后一页为空. 这个问题很奇怪,网上有很多解决方案,以下的方法可以解决此问题. ...
- 抓包排错-tcp.flags.reset
一 排查思路: 1,了解协议运作过程 2,抓包 最小化原则 对比法 二 案例 微信连wifi问题: 不同地区的微信服务器的地址可能不同. 当出现认证问题: 1,不能跳转,点了按钮没反应 2,打开后 ...
- 基于EventAggregator的事件发布及订阅
EventAggregator简介 EventAggregator是Prism中专门处理ViewModel与ViewModel之间事件传递的类对象,它提供了针对事件的发布方法和订阅方法,所以可以非常方 ...
- 基于Flot可放缩的折线图
Flot初步 Flot是一个免费开源的图标插件,可以用它开发出功能强大的图表系统.下面着重讲解在Asp.net中如何使用这个插件做出功能强大的图表应用. 关于Flot,可以在这里查看现有的例子(或者是 ...