CSS 定位之position_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

CSS 定位之position_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:55 AM

在前端网页布局中，在同一平面上布局，我们大都采用float属性来定位网页元素的位置。但是涉及到弹出层、浮层、页面广告插件等等，都需要CSS中的position属性来定位了，对于初学者来说经常分不清楚是应该用position属性的absolute值、relative值、fixed值等等，下面我们就position属性基本的这三个值的用法做一些简单的介绍，希望对初学者有些帮助。

1、position的absolute（绝对定位）

　　在这里position的absolute绝对定位我们分两类来讲：

　　A：给元素定义了position:absolute，其父框架没有定义任何position属性。此时的绝对定位就是相对于页面四周最边缘来进行定位的，位置将依据浏览器左上角的0点开始计算，绝对定位使元素与文档流无关，因此不占据空间。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。其位置不受父框架的影响，只以页面四周边缘开始计算。代码如下：

<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000;}</style></head><body><div class="all"><div class="demo">position:absolute;<br />left:100px;<br />top:200px;<br /></div></div></body></html>

로그인 후 복사

效果如下图：

B：给元素定义了position:absolute，其父框架定义了position:absolute\position:relative\position:fixed属性。此时的绝对定位就是相对于父框架最边缘最边缘来进行定位的，绝对定位使元素与文档流无关，因此不占据空间。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。其位置只在父框架内做变化，代码如下：

<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000; position:relative}</style></head><body><div class="all"><div class="demo">position:absolute;<br />left:100px;<br />top:200px;<br /></div></div></body></html>

로그인 후 복사

效果如下图

所以，如果页面元素的定位，想要定义在父元素内，而不受显示器分辨率，浏览器窗口大小等限制时，建议采用B种方案。

2、position的relative（相对定位）

　　如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）。

relative的确是相对于自己来定位的,父DIV设置了position:relative 没有给出值，它自身是没有效果的
但是对于它的子元素起到了参照作用

3、position的fixed fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。

关于position用法貌似还有很多，小编语言组织能力不是太好，总结一下用法：

当你需要做一个有下拉二级菜单效果时，父元素你需要position:relative，而里面的下拉元素则需要position:absolute。

当你需要做一个页面漂浮的广告，或者做一个返回页面顶端的按钮是，你需要position:fixed。

通常我们使用position:absolute；position:relative进行绝对定位布局，通过CSS进行定义定位，DIV布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute进行定位，同时不要忘记使用left、right、top、bottom的配合定位具体位置。绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以为父级（参考级）进行绝对定位。绝对定位非常好用，但切记不要滥用，什么地方都用，这样有时会懒得计算距离上、下、左、右间距，同时可能会造成CSS代码臃肿，更加经验适当使用，用于该使用地方。
在绝对定位时候我们可以使用css z-index定义css层重叠顺序。
同时left、right、bottom、top的数值，可以使用（Photoshop）PS切片工具获取准确的数值。

末了，小编在提醒一句，如果你在你的父DIV里面的子DIV使用了position:absolute属性定位，而父DIV没有做任何定义（父DIV里面已经被其他元素填充占据），还想要子DIV定义起到作用，这个时候子DIV你可以不用left、top、right、bottom来定义，可以使用margin-top、margin-left来定义，但是此种方法在ie6/7下和ie8/9/10/11、火狐、谷歌下面的位置是不一样的，针对ie6/7你需要用到css Hack，代码如下：

<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; margin-left:100px; margin-top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}</style></head><body><div class="all"><img  src="/static/imghw/default1.png"  data-src="1.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" / alt="CSS 定位之position_html/css_WEB-ITnose" ><div class="demo">position:absolute;<br />margin-left:100px;<br />margin-top:200px;<br /></div></div></body></html>

로그인 후 복사

效果如下图

使用CSS Hack之后代码：

<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; margin-left:100px; margin-top:-400px;*margin-top:200px;*margin-left:-500px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}</style></head><body><div class="all"><img  src="/static/imghw/default1.png"  data-src="1.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" / alt="CSS 定位之position_html/css_WEB-ITnose" ><div class="demo">position:absolute;<br />margin-left:100px;<br />margin-top:200px;<br /></div></div></body></html>

로그인 후 복사

在各个版本的浏览器下的效果如下

此种方法最好不要使用在不同版本浏览器下需要来回的用CSS Hack调整！

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

자바 튜토리얼

1655

Cakephp 튜토리얼

1413

라라벨 튜토리얼

1306

PHP 튜토리얼

1252

C# 튜토리얼

1226

Related knowledge

HTML은 초보자를 위해 쉽게 배우나요? Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서 Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류? Apr 04, 2025 pm 11:54 PM

GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...

HTML의 시작 태그의 예는 무엇입니까? Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.