你的位置:首页 > 网页设计

[网页设计]详解CSS定位原理


现在有一个窗口绝对定位position:absolute;,设置css样式left: 0;right: 0;,可以实现窗口的宽度百分之百(100%)。

这时候,没有给窗口设置顶部top:0;,默认情况下窗口顶部为零,或者也可以说,默认情况下,窗口跟随着上一个窗口的底部bottom:0;。

如果上一个窗口是浏览器的边框,那么当前窗口就会紧贴着上一个窗口的边框,也就是浏览器的边框。 总结以上概述,当我们绝对定位一个窗口,设置窗口的左(left)右(right)都为零, 相对于上一个窗口(浏览器)而言,当前窗口的宽度为100%;

.box{  display: block;  position: absolute;  left: 0;  right: 0;} //browser => width:100%; // box => width:100%;

box窗口居左

还是以上面窗口的定位为例,定义父窗口的类为class = "box",父窗口内部再加一个子窗口定义类为class = "content",然后给父窗口设置居左left:0;

.content{    display: block;    width: 100px;    height: 100px;    background-color: rgb(54, 171, 23); }

 

 这时候,在默认情况下!我们看到的子窗口自动居左。也不排除父窗口绝对定位居左,使得子窗口也随着父窗口居左。 如果我不想子窗口随着上一个窗口的定位而改变子窗口的显示位置,于是我给子窗口进行绝对定位position:absolute; 那么子窗口会不会随着上一个窗口而改变呢?分析如下:

.content{    display: block;     position:absolute;    width: 100px;    height: 100px;    background-color: rgb(54, 171, 23); }

子窗口居左

于是,我在浏览器上看到子窗口设置居左的情况下,即使父窗口的定位居左,而且宽度为零;子窗口还是能显示出来。

.content{    display: block;    position: absolute;    left: 0;    width: 100px;    height: 100px;    background-color: rgb(54, 171, 23);  }

 

子窗口居右

当我给子窗口设置居右的情况下,原先父窗口的定位还是居左,而且宽度为零;子窗口却没有了效果,子窗口到底去哪里呢?

.content{    display: block;    position: absolute;    right: 0;    width: 100px;    height: 100px;    background-color: rgb(54, 171, 23); }

 

猜想:子窗口是不是在父窗口的最右边?证明这一点很简单,我们只需给父窗口加上一个width:100%,或者给子窗口加一个width:inherit继承父窗口,亦或者修改content定位为position:relative都可以,提前是你的父窗口要有这个width:100%。此时,发现content窗口显示在最右边。

 

综上得出:

如果父窗口宽度为零

当我给父窗口(.box)定位居左,(content窗口)子窗口居左能显示子窗口全部效果。

当我给父窗口(.box)定位居右,不能显示全部效果。

如果目前窗口宽度不为零

子窗口定位居右能显示子窗口效果(不全部),居左也能显示子窗口全部效果。

宽度”为零“与”不为零“

简言之,父窗口定位居左,宽度为零,子窗口居左可见(visible),居右不可见(hidden)。父窗口定位居左,宽度不为零,子窗口居左可见(visible),居右也可见(visible)。

详细内容见下文!

其实真正要解决的不是上面的证明,而是子窗口(content)是不是随着父窗口(box)来改变的,还是content窗口随着box的父窗口改变(也就是说随着上上一个窗口改变)?因为box窗口和box父窗口的宽度width都是继承关系,会让我们误以为content窗口也会随着box父窗口而改变的。那么我就修改一下box窗口的宽度width:300px;这次box窗口的宽度就不继承box窗口父窗口的宽度,我发现content窗口是在box窗口的最右边。

.box{  display: block;  position: absolute;  right: 0;  width: 300px;  vertical-align: middle;  background-color: rgba(154, 171, 123,1);}

还是上面的例子,假如现在box父窗口的宽度小于conten子窗口的宽度,设置box父窗口的宽度为width:50px;和conten子窗口twidth:100px; 还是让box父窗口定位居左,当我定位content子窗口居左的时候,还是能看到完整的content子窗口大小,然而box不起作用。

当我定位content窗口居右的时候,看到的不是完整的content窗口的大小,而看到的是box窗口的大小。

总结:a:父窗口的宽度小于子窗口的宽度(子窗口的宽度大于父窗口的宽度),子窗口居左能显示完整的子窗口的大小(宽度),子窗口居右显示父窗口的大小(宽度)。

反之,b:父窗口的宽度大于子窗口的宽度(子窗口的宽度小于父窗口的宽度),子窗口居左和居右都能显示完整的父窗口的大小(宽度)。

分析a and b

 

如果a成立的话,我把父窗口定位的位置向右移动20像素,那么子窗口定位居左,显示的是子窗口的宽度。//content_long_a

如果a成立的话,我把父窗口定位的位置向右移动20像素,那么子窗口定位居右,显示的是父窗口的宽度width加上父窗口向右移动20像素的位移的值 // 可见区域 = box_long_a

如果b成立的话,我把父窗口定位的位置向右移动20像素,那么子窗口定位居左/居右,都显示的是父窗口的宽度width。 //可见区域content_long_b

如果a成立的话var box_long_a, content_long_a;var box_left = document.querySelector('.box');var content_left = box_left.querySelector('.content');box_long_a = box_left.style.left + box_left.style.width;content_long_a = box.style.width;如果b成立的话var content_long_b;var box_left = document.querySelector('.box');var content_left = box_left.querySelector('.content');content_long_b = box_left.style.width;

 

box窗口居右

如果是box窗口居右的情况下,box窗口的宽度还是为零。

.box{  display: block;  position: absolute;  height: 100px;  right: 0;  vertical-align: middle;  background-color: rgba(154, 171, 123,1);}

子窗口还是绝对定位(父窗口的宽度小于子窗口的宽度的情况下。)如果我给子窗口设置居左,看到的效果是显示完整的子窗口的大小(宽度)。

不过这个子窗口的定位是根据父窗口的宽度为零的位置开始的路径。也就是说,子窗口的左边left的值相对于父窗口的left的来定位的,

并非是子窗口的左边left的值相对于父窗口的right来定位的。

 box{right:len;} <==> content{left:len2;} // len2 = len;

如果我给子窗口设置居右,看到的效果是显示完整的子窗口的大小(宽度)。
这里子窗口的right是根据父窗口的right的值来定位,所以,子窗口从右向左移动多少像素、位移。

子窗口还是绝对定位(父窗口的宽度大于子窗口的宽度的情况下。)
此刻我们不管我们怎么定位子窗口的位置,都能看到子窗口的效果。