css position用法与导致页面变形js处理方法

position中的绝对定位和相对定位用法

对定位:position: absolute;语法:<div style="position: absolute;left:100px;top:100px"></div>
有如下两种情况
1,没有设定 top、right、bottom、left 的情况,默认依据父级的“内容区域原始点”为原始点
2,有设定 top、right、bottom、left 的情况,这里又分了两种情况如下:
(1),父级没 position 属性,浏览器左上角(即 body)为“坐标原始点”进行定位,位置由 top、right、bottom、left 属性决定
(2),父级有 position 属性,父级的“坐标原始点”为原始点

相对定位:position: relative;
参照父级的“内容区域原始点”为原始点,无父级则以 body 的“内容区域原始点”为原始点,位置由 top、right、bottom、left 属性决定,并且会在父块以外占据相同的大小,所以不推荐使用。

无论相对定位或绝对定位有一点需要注意的就是
left和right只能设置一个
top和bottom也只能设置一个

如果因为position致页面变形了就可以利用下面的js代码来解决

var ietest=function()
{
if ($.browser.msie) {
if ($.browser.version == "6.0")
{
var _width=document.documentelement.clientwidth+29; //桌面分辨率大小
$("#nav").css教程("left",((_width-950)/2)-15); //重新设置值
return false;
}
return false;
}
return false;
}
window.onresize=ietest; //缩放窗体时触发事件
position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。

position 属性值的含义:

static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

时间: 2024-08-03 14:16:16

css position用法与导致页面变形js处理方法的相关文章

jquery.messager.js插件导致页面抖动的解决方法

这盘文章介绍了jquery.messager.js插件导致页面抖动的解决方法,有需要的朋友可以参考一下   消息弹出时页面总是抖动或者闪一下,找了很长时间没有找到原因,今天找到,原来是html没有声明解析规范 需要加上<!DOCTYPE> 标签 复制代码 代码如下: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

IE6中使用position导致页面变形的解决方案(js代码)_javascript技巧

如图所示: 解决方案: 1.缩放窗体时先得到内容左边的空白宽度. $("#nav").offset().left; 得到内容区左边的空白宽度. 2.得到整个窗体的宽度(注意:桌面分辨率为基准,少了加上来). 3.用桌面分辨率的宽度-页面内容区的宽度/2,就可以得到一边多余的宽度. 4.如果得到的值跟$("#nav").offset().left;得到值不同,则可以调到两值相同. 复制代码 代码如下: var ietest=function() { if ($.bro

jquery.messager.js插件导致页面抖动的解决方法_jquery

消息弹出时页面总是抖动或者闪一下,找了很长时间没有找到原因,今天找到,原来是html没有声明解析规范 需要加上<!DOCTYPE> 标签 复制代码 代码如下: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

.net 弹出消息框后导致页面样式变乱解决方法_实用技巧

点击按钮,执行提交操作,弹出消息框后,页面的样式变乱,解决方法: 首先,确定使用的css样式正确,页面中的宽高值保持规范统一: 然后,弹出框避免使用Response.Write(),如下所示 复制代码 代码如下: Response.Write("<script language=javascript>"); Response.Write("window.alert('"); Response.Write("计划添加失败!"); Res

图片撑破: 图片太大图片撑破页面变形的解决方法

<script language="JavaScript"> var imgObj; for(i = 0; i < document.all.length; i++) { if(document.all(i).tagName.toLowerCase()=="img") { imgObj = document.all(i)  //建议只判断高度或者宽度其中一个,那样可以自动按比例缩放  if (imgObj.height>500)  //判断图

js或css如何控制打印的页面,每页都有页眉页脚?求实例

问题描述 js或css如何控制打印的页面,每页都有页眉页脚?求实例 现在有一个需要打印的页面,要求打印时无论有几页,每页都要有相同的页眉页脚 解决方案 http://www.codefans.net/jscss/code/4193.shtml 解决方案二: css page-break-after:always; CSS控制打印区域

能用HTML/CSS解决的问题就不要使用JS

为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例. 1. 导航高亮 导航高亮是一种很常见的问题,包括当前页面的导航在菜单里面高亮和hover时高亮.你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS. 在正常态时,每个导航的默认样式为: nav li{      opacity: 0.5;  }  当前页面的导航透明度为1. 为了实现这个目的: 首先通过body给

JS+CSS实现模仿浏览器网页字符查找功能的方法

 这篇文章主要介绍了JS+CSS实现模仿浏览器网页字符查找功能的方法,实例分析了javascript实现查找功能的样式及相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS+CSS实现模仿浏览器网页字符查找功能的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <title>JS+CSS模仿的网页字符查找功能</title> <style type=text/css> BODY

CSS3条件判断语句CSS @supports用法

用JavaScript在客户端检测浏览器是否支持某项功能特征,目前虽然这是最可行的方法,但不好的是,对于同一个特征的检测,我们需要反复多次用相同的函数附带各种浏览器前缀.而且因为CSS没有相应的功能,使用JavaScript会导致页面闪现,多余辅助代码等问题.火狐浏览器,谷歌浏览器和Opera浏览器最近刚刚添加了一项新的功能--在CSS里支持@supports标记.在JavaScript里支持CSS.supports函数,用来检测浏览器是否支持某个期望的样式功能.下面让我们来看看是如何使用的!