CSS+DIV在用absolute绝对定位时怎么使页面自适应

<div id="div1" style="position:absolute;left:10%;top:20%;width:50%;">
<div id="div2" style="position:absolute;left:20%;top:30%;width:20%;">
<div id="div3" style="position:absolute;left:30%;top:40%;width:30%;">

如上图：

我们用absolute的绝对定位的时候，需要做自适应的时候，我们除了需要把top、left，还需要设置width（注意：这里使用的是百分比）

时间： 2024-11-16 07:41:10

CSS+DIV在用absolute绝对定位时怎么使页面自适应的相关文章

CSS+DIV布局中absolute和relative区别

http://developer.51cto.com/art/201009/225201.htm CSS+DIV布局中absolute和relative区别这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在. 详解CSS+DIV布局定位在用CSS+DIV进行布局定位的时候,一

CSS+DIV布局中absolute和relative的区别

来源 :http://developer.51cto.com/art/201009/225201_1.htm 解释的很好.摘下来后面自己能看看. 区别:定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在. position各个属性值的定义: 1.static:默认值.没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)

设计3个按钮，当单击他们时分别使页面的背景色变成红、蓝和绿色。

<form name="myForm"> <P><INPUT type="button" value="红" onClick="ChangeBgColor('red')"></P> <P><INPUT type="button" value="蓝" onClick="ChangeBgColor('blue')&q

【转】css+div要注意的地方

当我们进行CSS+DIV的方式来重构我们的 html页面时,通常会发现一些是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位.应用应用DIV+CSS编码时很容易犯一些错误.本文列举了一些常见的错误: 1.检查HTML元素(如:<ul>.<div>).属性(如:class=”")是否有拼写错误.是否忘记结束标

精通CSS.DIV网页样式与布局系列学习

精通CSS.DIV网页样式与布局(八)——滤镜的使用精通CSS.DIV网页样式与布局(七)——制作实用菜单精通CSS.DIV网页样式与布局(六)——页面和浏览器元素精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式精通CSS.DIV网页样式与布局(四) ——页面背景精通CSS.DIV网页样式与布局(三)——中秋效果图精通CSS.DIV网页样式与布局(二)—— 段落精通CSS.DIV网页样式与布局(二) 精通CSS.DIV网页样式与布局(一) 神奇的验证码,我们一起来探究

【转】用CSS+DIV时width的问题

CSS盒子占据面积的大小一共是边距(margin)+边框(border)+填白(padding)+宽度(width).所以当你设置width:200px;border:1px xx xx;的时候,实际的这个DIV的width最大值还是200.只是DIV的实际占据页面的宽度是:1(左边框)+200(width)+1(右边框)=202所以这个DIV里面还有200的宽度可以容纳包含的DIV.当然如果里面的DIV宽度大于200,外面DIV定义的宽度就会失去效果. 注意啦!注意啦!重点地方要回答你了,如果

css基础 position:fixed/absolute 把div转换为行内块元素

礼悟: 公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体. 虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜. ide:visual studio 2017 browser:Chrome os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

鼠标经过图片时变换的两种方法--css+div及javascript应用

javascript方式: 熟悉使用document.getElementById()取得节点对象 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

CSS 绝对定位时，水平居中而不影响原文档中其它元素

div.absolutemiddle { position: absolute; left: 50%; transform: translate(-50%); /* 平移50%为自身尺寸的一半,实现水平居中 */ } 原文地址:https://www.cnblogs.com/qinlongqiang/p/12275338.html