Home Web Front-end HTML Tutorial 详解css中position属性_html/css_WEB-ITnose

详解css中position属性_html/css_WEB-ITnose

Jun 21, 2016 am 09:04 AM

最近画富瑞的界面,很多元素的定位都是个问题(在我没有很详细的知道position属性之前)

后来上网查了下关于position的一些相关的属性和用法,遂整理了一下

 

position:属性:固定元素的定位类型。即元素脱离文档的布局流,在元素的任意位置显示。

 

关于position的属性值,有四种:

1、static:默认布局(默认值)

2、fixed:固定定位,顾名思义是固定的意思,和absolute定位类似,但是比absolute更”定“!(不随滚动条的滚动而滚动)

3、relative:相对定位,脱离文档的布局流,但是会在文档的原先位置留下空白

4、absolute:绝对定位,脱离文档的布局流,在文档中不会留下位置

 

下面简答的说下这几种定位方式:

一、static

              这个布局为默认的布局,所以可说可不说,大家都比较熟悉了

              这就是意味元素没有被定位,而且在文档出现在它应该出现的位置上

             

二、fixed

              fixed定位的对象是以body为定位的对象,简而言之就是根据整个窗口(page)进行定位,通过(t,r,b,l)来进行定位,

              如果你的scroll设置为false的话,这个定位就很吊了!,很多网站的广告就是这个鬼

              其实感觉网上都说得很麻烦,在我的理解,fixed就是把这个元素钉死在屏幕的这个点上,别的都不管(简单粗暴)

             

三、absolute

              绝对定位,这是将对象抽离出正常的文档流进行定位的一种方式,是将元素从整个文档中飘出来,而元素自身的物理空间也会

              自然而然的消失,不像relative还会有原来的物理位置

              如果父级(无限)没有设定position属性,那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位

              如果父级(无限)设定position属性,那么当前的absolute则结合TRBL属性以父级(最近)的左上角为原始点进行定位。

              当设定position: relative 则参照父级(最近)的内容区的左上角为原始点结合TRBL属性进行定位(或者说相对于被定位元素在父级内容区中的上一个元素进行偏移),无父级则以BODY的左上角为原始点。相对定位是不能层叠的。在使用相对定位时,无论元素是否进行移动,元素依然占据原来的空间。因此,移动元素会导致它覆盖其他框。

              一般来讲,居中效果的话用Absolute就容易出错,因为页面一直是随着分辨率的大小自动适应的,

              而Absolute则会以手机屏幕的左上角为原始点,不会应为分辨率的变化而变化位置。有时还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,

              数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。

              在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。

              放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外,滚动条不会出现。

             

四、relative(感觉我理解的也不是特别的透彻)

              从应用的角度来说,relative常用于包含有absolute元素的容器元素上。absolute元素默认以body做为容器元素进行绝对定位。

              如果你想在页面一个特定区域进行绝对定位,就可以在absolute元素外包裹一层容器元素应用relative样式。

              形象一点说,相对定位是非常自私的

              其最大特点是:自己通过定位跑开了还占用着原来的位置,不会让给他周围的诸如文本流之类的对象。

              相对定位也比较独立,做什么事它自己说了算,要定位的时候,它是以自己本身所在位置偏移的(相对对象本身偏移)。

              其中relative需要理解最重要的一点就是相对于自身定位:也就是说

              relative是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。

             

最后说明下relative和absolute结合使用的一种情况

先说明一句话:

              绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置,那么绝对定位的元素的参考物就是html

在强调一点:relative是相对于自身定位,absolute是相对父级元素定位的

 

举个栗子(网上找的,感觉说的灰常好)

(这里放不了图很不好,不过大家可以脑补嘛)

上图做为一个实例来说明“relative”和“absolute”的关系,首先上图中共有三个div放在body内,

而且他们三个div的关系是“div-1>div-2>div-3”,而且在div-3有这么一个绝对定位:

.div-3 {                position: absolute;                left:0;                top:0;            }
Copy after login

 下面分几个情况来说明上图的意思:

1、div-1与div-2都没有设置“position:relative”,此时我们的div-3绝对定位后就漂到了上图中“div-3c”的位置上;

 

2、现在我们在div-2元素中加设置一个“position: relative”,此时我们的div-3绝对定位后就漂到了上图中的“div-3a”的位置;

 

3、接下来把相对定位的设置换到div-1元素上,此时div-3绝对定位后就到了div-3b的位置。

 

花这么多心思,我只想说明一点:如果一个元素绝对定位后,其参照物是以离自身最近元素是否设置了相对定位,

如果有设置将以离自己最近元素定位,如果没有将往其祖先元素寻找相对定位元素,一直找到html为止。


Statement of this Website
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

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 ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

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.

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.

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 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 &lt;datalist&gt; 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 &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

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 &lt;time&gt; 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

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 &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

See all articles