찾다
웹 프론트엔드HTML 튜토리얼CSS定位与层叠_html/css_WEB-ITnose

position:static(静态定位)

    当position属性定义为static时,可以将元素定义为静态位置,所谓静态位置就是各个元素在HTML文档流中应有的位置

podisition定位问题。所以当没有定义position属性时,并不说明该元素没有自己的位置,它会遵循默认显示为静态位置,在静态定位状态下无法通过坐标值(top,left,right,bottom)来改变它的位置。

position:absolute(绝对定位)

    当position属性定义为absolute时,元素会脱离文档流,完全不受文档流的影响,根据某个参照物坐标来定位它的位置.当绝对定位元素没有显示的指明top,right,bottom,left定位属性时,它还是暂时未脱离文档流,并受文档流的影响,具有相对定位的特性,但是它在文档流中的位置已经不存在了。如果绝对定位只显示的定位x轴或者Y轴,那它只具备这个方向上的定位能力,另一个方向仍然显示为相对定位的特性。

坐标值:

top:表示定位元素顶边外壁到参照物元素顶部内壁的距离

right:表示定位元素右边外壁到参照物元素右侧内壁的距离

left:表示定位元素左边外壁到参照物元素左侧内壁的距离

bottom:表示定位元素底边外壁到参照物元素底部内壁的距离

<div id="box">box                                                            <div id="boxA">boxA</div>    <div id="boxB">boxB   <div id="boxC">boxC</div>   <div id="boxD">boxD</div>  </div> </div>

#box{ margin:40px auto; width:400px; height:400px; border:2px red solid;}#boxA{ position:absolute; top:100px; left:100px; width:50px; height:50px; background: #3E7DB0;}

 

大盒子box在整个网页中距顶部40px居中显示,但是boxA由于position定位为绝对定位,它脱离了大盒子,距整个网页左边100px顶部100px,当元素定义为绝对定位,可以根据结合它的坐标属性(top,left,bottom,right)来精确定位它的位置

position:relative(相对定位)

相对定位好似一种折中的方法,是在静态定位和绝对定位中去一个平衡点,所谓相对定位就是使被应用的元素不脱离文档流,却能够通过坐标值以原始位置为参照物进行偏移。

坐标值:

top:表示定位元素顶边外壁到原始位置顶部外壁的距离

right:表示定位元素右边外壁到原始位置元素右侧外壁的距离

left:表示定位元素左边外壁到原始位置元素左侧外壁的距离

bottom:表示定位元素底边外壁到原始位置元素底部外壁的距离

1 <div id="box">2      <div id="boxA">boxA</div>3      <div id="boxB">boxB4       <div id="boxC">boxC</div>5       <div id="boxD">boxD</div>6         </div>7     </div>

 

#box{ margin:40px auto; width:400px; height:400px; border:2px red solid;}#boxA{ position:relative; top:100px; left:100px; width:50px; height:50px; background: #3E7DB0;}#boxB{ width:50px; height:150px; background: #B9C8C5;}#boxC{ width:50px; height:50px; background: #1D92C8;}#boxD{ width:400px; height:50px; background: #086499;}

大盒子box在整个网页中距顶部40px居中显示,当元素boxA由于position定义为相对定位,相对于它本身的位置的位置进行偏移,据原先的位置左100px和顶部100px,当遇到文档流boxD时,它会覆盖boxD。相对定位虽然偏离了原始位置,但是它的原始位置所占据的空间仍然保留着,并没有被其它元素所占据。

position:fixed(固定定位)

固定定位是绝对定位的一种特殊形式,它是以浏览器窗口作为参照物来定义网页元素,如果定义某个元素固定显示,则该元素不在受文档流的影响。他始终以浏览器窗口来定位自己显示的显示位置,不管浏览器窗口如何滚动,也不管浏览器窗口大小如何变化,该元素都会显示在浏览器窗口内。通俗的说就是以浏览器窗口的四条边作为坐标系来定位元素的位置。

1 <div id="box">box </div> 2 <div id="fixed">fixed</div>

 1 #box{ 2  margin:40px auto; 3  width:400px; 4  height:400px; 5  border:2px red solid; 6  position:fixed; 7 left:100px; 8 top:100px;  9 }10 #fixed{11  height:4000px;12 }

当把box定义为固定定位时,box永远都是在浏览器窗口内,fixed属性还可通过left,right,top,bottom来控制从流浪器不同边框来进行定位。

相对定位(relative)与绝对定位(absolute): 

<div id="box">box  <div id="boxA">boxA</div>  <div id="boxB">boxB   <div id="boxC">boxC</div>   <div id="boxD">boxD</div>  </div> </div>

如果box把 position属性定义为relative,只有它的子元素boxA和boxB position属性定义为absolute才能相对box定位,而他的孙子元素boxC和boxD把position定义为absolute并不能相对box来定位。但是如果把boxB的position属性定义为relative,它底下的子元素boxC和boxD就能相对于父元素boxB来定位,所以,把position属性定义为relative的元素,只有它的子元素才能相对它定位,孙子元素并不能相对它定位。相对定位与绝对定位的结合使用可以更加精确的控制网页元素,设计出更强大的布局效果。

position属性定位小工具: www.linxz.de/css_tool/position_demo.html

层叠:

css可以通过 z-index 属性来排列不同定位元素之间的层叠顺序,该属性可以设置任何整数值,数值越大,所排列的顺序越靠前。

1  <div id="box">box2   <div id="boxA">boxA</div>3   <div id="boxB">boxB</div>4   <div id="boxC">boxC</div>5  </div>

 1 #boxA,#boxB,#boxC{ 2  width:100px; 3  height:200px; 4  position:absolute; 5 } 6 #boxA{ 7  background: #086499; 8  z-index:1; 9  left:100px;10 }11 #boxB{12  top:50px;13  left:50px;14  background: #B9C8C5;15  z-index:2;16 }17 #boxC{18  top:100px;19  background: #1D92C8;20  z-index:3;21 }

boxC排在最上面,boxB在最中间,boxA在最后。z-index的值越大越靠前。

第一次写博客,写的不好,请各位看官多多指正。  

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전