search
HomeWeb Front-endHTML Tutorial详解CSS定位原理_html/css_WEB-ITnose

现在有一个窗口绝对定位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;        <strong>left</strong>: 0;        width: 100px;        height: 100px;        background-color: rgb(54, 171, 23);    }

 

子窗口居右

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

.content{        display: block;        position: absolute;<strong> right</strong>: 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的值来定位,所以,子窗口从右向左移动多少像素、位移。

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

 

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How do I use HTML5 form validation attributes to validate user input?How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

How to efficiently add stroke effects to PNG images on web pages?How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What are the best practices for cross-browser compatibility in HTML5?What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <datalist> element?What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <meter> element?What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What is the purpose of the <progress> element?What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

How do I use the HTML5 <time> element to represent dates and times semantically?How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.