用法详解,padding对于元素position定位的影响
分类:高并发

padding对于元素position定位的影响,paddingposition

padding对于元素position定位的影响:
关于padding和position的基本用法这里不多介绍了,可以参阅相关阅读。
相关阅读:
1.padding可以参阅CSS的padding用法详解一章节。
2.position可以参阅CSS的position属性一章节。
下面进入正题,介绍一下padding属性对于定位的影响。
代码实例:
实例一:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.box{
  width:300px;
  height:150px;
  background-color:#CCC;
  padding:20px;
}
.inner{
  width:50px;
  height:50px;
  background-color:red;
  position:relative;
  left:10px;
  top:20px;
}
</style>
</head>
<body>
<div class="box">
  <div class="inner"></div>
</div>
</body>
</html>

相对定位的参考对象由于是自身,所以不会受padding的影响。
实例二:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.box{
  width:300px;
  height:150px;
  background-color:#CCC;
  padding:20px;
  position:relative;
}
.inner{
  width:50px;
  height:50px;
  background-color:red;
  position:absolute;
}
</style>
</head>
<body>
<div class="box">
  <div class="inner"></div>
</div>
</body>
</html>

对于绝对定位,如果没有设置left或者top属性值,那么相应方位就不会忽略padding值。
实例三:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.box{
  width:300px;
  height:150px;
  background-color:#CCC;
  padding:20px;
  position:relative;
}
.inner{
  width:50px;
  height:50px;
  background-color:red;
  position:absolute;
  left:5px;
}
</style>
</head>
<body>
<div class="box">
  <div class="inner"></div>
</div>
</body>
</html>

对于绝对定位相应方位设置了left和top属性值,那么就会忽略相应方位的padding。

原文地址是:

更多内容可以参阅:

padding对于元素position定位的影响: 关于padding和position的基本用法这里不多介绍了,可以参阅相...

jQuery的offset()和position()用法详解,jqueryoffset

offset()和position()用法详解:
这两个方法非常的常用,同时掌握起来有些困难,下面就介绍一下这两个方法的用法。
下面先看一下它们基本的定义:
1.offset()方法的定义:
此方法获取或者设置匹配元素在当前document的相对偏移。
此方法只对可见元素有效。 
当获取偏移量时,方法的返回值是一个包含两个整型属性(top和left)的对象。
设置偏移量时,此方法的参数是带有top和left属性的对象。
具体用法可以参阅jQuery的offset()方法一章节。
2.position()方法的定义:
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性(top和left)的对象。
为精确计算结果,请在补白、边框和填充属性上使用像素单位。
此方法只对可见元素有效。
具体用法可以参阅jQuery的position()方法一章节。
但是此方法并非只有定义的那么简单,在实际应用中,它的返回值也并非只是获取匹配元素相对父元素的偏移量。
实际上position()方法是将元素以CSS的绝对定位来处理,也就是position属性值为absolute(当然并不是将元素的的定位方式真的设置为绝对定位),这个时候它的定位参考对象准确的来说应该是距离它最近的一个拥有定位的父元素,和CSS的绝对定位的原则是一样的,可以参阅position绝对定位以哪个对象为参考一章节。
代码实例如下:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>offset()和position()用法详解-蚂蚁部落</title>
<style type="text/css"> 
body{ 
  margin:15px; 
  width:960px; 
} 
.parent{ 
  border:3px solid #ccc; 
  width:600px; 
  height:300px; 
  margin-left:55px; 
  padding:25px; 
} 
.child{ 
  background:#666; 
  width:200px; 
  height:200px; 
  color:#fff; 
} 
.copyright{ 
  position:absolute; 
  right:0; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">  
$(document).ready(function(){  
  $(".child").each(function(){  
    var text = "position().left="+$(this).position().left;  
    text +="<br>position().top="+$(this).position().top;  
    text +="<br>offset().left="+$(this).offset().left;  
    text +="<br>offset().top="+$(this).offset().top;  
    text +="<br>其parent的offset().top="+$(this).parents(".parent").offset().top;  
    text +="<br>其parent的offset().left="+$(this).parents(".parent").offset().left;  
    $(this).html(text);  
  }) 
}) 
</script> 
</head> 
<body> 
<div class="parent" style="float:right"> 
  父容器的position是默认值,static。子容器的position为默认值,static。offset和position值相同 
  <div class="child"></div> 
</div> 
<div style="clear:both"></div> 
<div class="parent" style="position:relative">  
  父容器的position是相对定位ralative,子容器的position为默认值static。offset和position值不同 
  <div class="child"></div> 
</div> 
<br/> 
<div style="position:absolute;padding:15px;border:3px solid #ff0000;"> 
  <div class="parent">  
    祖父容器的position是绝对定位absolute,子容器的position为默认值static。offset和position值不同 
    <div class="child"></div> 
  </div> 
</div> 
</body> 
</html>

最后总结:
1.offset()方法获取的是匹配元素相对于文档的偏移量,和对象本身和父元素的定位方式是无关的。
2.position()方法稍稍复杂一些:
1).如果祖辈元素中有采用绝对定位或者相对定位者,则此方法获取的偏移量将以最近的采用定位的的祖辈元素为参考。
2).如果祖辈元素中没有采用绝对定位或者相对定位者,则此方法获取的偏移量将以窗口为参考对象。

原文地址是:

更多内容可以参阅:

offset()和position()用法详解: 这两个方法非常的常用,同时掌握起来有些困难,下面就介绍一下这...

CSS position属性,

position属性的定义和用法:
检索或设置对象的定位方式。
设置此属性值为absolute 会将对象拖离出正常的文档流而不考虑它周围内容的布局。假如其他具有不同z-index属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。此时对象不具有margin,但仍有padding和边框border。
要激活对象的绝对定位,不但要设置此属性值为absolute,而且必须指定left,right,top,bottom属性中的至少一个。否则上述属性会使用他们的默认值auto ,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递。
设置此属性值为relative 会保持对象在正常的HTML流中,但是会根据对象本身原来的位置进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的,在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外,滚动条不会出现。
对应的脚本特性为position。 
语法结构:

position:static | relative | absolute | fixed

取值:
static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用,默认值。
relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。
absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。 
fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。IE6不支持此属性值。
浏览器支持:
IE浏览器支持此属性。
火狐浏览器支持此属性。
谷歌浏览器支持此属性。
opera浏览器支持此属性。
注意:IE6不支持fixed属性值。
继承性:
没有继承性。
实例代码:
实例一: 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>position属性-蚂蚁部落</title>
<style type="text/css">
.mytest{
  width:200px;
  height:100px;
  border:1px solid blue;
  position:static;
  top:40px;
}
</style>
</head>
<body>
  <div class="mytest">蚂蚁部落欢迎您</div>
</body>
</html>

static是对象的默认定位值,无任何特殊定位,所以top属性将会被忽略。
实例二: 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>position属性-蚂蚁部落</title>
<style type="text/css">
.parent{
  width:300px;
  height:300px;
  border:1px solid #606;
}
.first{
  width:100px;
  height:100px;
  border:1px solid blue;
  position:relative;
  top:30px;
}
.second{
  width:100px;
  height:100px;
  border:1px solid #606;
}
</style>
</head>
<body>
<div class="parent">
  <div class="first">我是第一个孩子</div>
  <div class="second">我是第二个孩子</div>
</div>
</body>
</html>

first对象进行相对定位,它所相对的元素就是它自己本身的位置。而second的对象不会受到first对象的影响,依然会呆在它原来的地方。
实例三: 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>position属性-蚂蚁部落</title>
<style type="text/css">
.grandfather{
  width:400px;
  height:400px;
  border:1px solid green;
  position:relative;
}
.parent{
  width:300px;
  height:300px;
  border:1px solid #606;
}
.first{
  width:100px;
  height:100px;
  border:1px solid blue;
  position:absolute;
  bottom:50px;
}
.second{
  width:100px;
  height:100px;
  border:1px solid #606;
}
</style>
</head>
<body>
<div class="grandfather">
  <div class="parent">
    <div class="first">我是第一个孩子</div>
    <div class="second">我是第二个孩子</div>
  </div>
</div>
</body>
</html>

以下代码可以看出绝对定位对象的参考对象并非都是body或者它的最近得父对象,而是距离它最近的带有position属性并且属性值不为static的父对象。下面的first对象就是以grandfather作为偏移参考对象的。
实例四:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>密码强度提示功能-蚂蚁部落</title>
<style type="text/css">
.grandfather{
  width:400px;
  height:400px;
  border:1px solid green;
  position:relative;
}
.parent{
   width:300px;
   height:300px;
   border:1px solid #606;
}
.first{
  width:100px;
  height:100px;
  border:1px solid blue;
  position:fixed;
  bottom:50px;
}
.second{
  width:100px;
  height:100px;
  border:1px solid #606;
}
</style>
</head>
<body>
<div class="grandfather">
  <div class="parent">
    <div class="first">我是第一个孩子</div>
    <div class="second">我是第二个孩子</div>
  </div>
</div>
</body>
</html>

postion的fixed定位永远是以body作为偏移参考对象的。

原文地址是:

更多内容可以参阅:

position属性, position属性的定义和用法: 检索或设置对象的定位方式。 设置此属性值为absolute 会将对象拖离出正常的文档流而不考虑它周...

本文由10bet手机官网发布于高并发,转载请注明出处:用法详解,padding对于元素position定位的影响

上一篇:Python实现替换文件中指定内容的方法,python查找指定具有相同内容文件的方法 下一篇:没有了
猜你喜欢
热门排行
精彩图文