CSS의 위치 지정 모델은 무엇입니까?
- 零下一度원래의
- 2017-06-24 14:00:371261검색
포지셔닝 모델 2017년 6월 8일 fanbright
css는 6개의 포지셔닝 모델을 지원합니다
static
absolute
fixed
relative
-
떠있다
-
상대적으로 떠있다
위치 설정
요소의 위치 지정 설정을 취소하고 일반 흐름에서 원래 표시 모드로 복원할 수 있습니다.
position:relative; use 요소의 위치는 일반 흐름을 기준으로 특정 거리만큼 오프셋됩니다.
position:absolute는 일반 흐름의 위치 또는 가장 가까운 위치의 조상 위치를 기준으로 특정 거리만큼 요소를 오프셋할 수 있습니다.
position:fixed; 창을 기준으로 특정 거리만큼 요소를 오프셋할 수 있습니다.
z-index는 값이 클수록 요소가 높아지는 순서를 설정할 수 있습니다. .
최근 배치된 상위 요소
最近定位祖先元素如果设定位置的元素没有定位祖先元素,那么
<body>就成为定位祖先元素,换言之,<body>是默认设定位置元素.最近定位元素必须是有效的祖先元素(relative|absolute|fixed),css不支持相对于文档中任意元素进行定位的方法.
-
position:relative;是一个非常好的创建定位祖先元素的方法,因为它不会离开常规流.使用这种方法,能够创建出既保持常规流又实现绝对定位的布局.
原子显示设定了位置的元素是
原子显示的,这意味着它的静态后代元素,行内内容和背景之间不可能出现外部元素.通过使用相对定位,绝对定位和固定定位模式,就可以将元素设置为原子显示,设置为overflow:scroll|auto的块级元素也是原子显示的
而没设定位置的静态块级,当发生重叠时,他们的行内内容不会重叠,但是他们的边框和背景会发生重叠,但文字不会.
z-index
适用于所有元素,默认auto
z-index不是全局属性,而是相对于设置了数字值z-index的最近定位祖先元素而定.根元素html会创建根堆叠上下文.每一个指定数字值z-index的设定位置元素都会创建一个本地的局部的堆叠上下文.
静态定位元素按照文档出现顺序从后往前进行堆叠.
设定位置元素忽略文档元素出现顺序,而是根据z-index值由小到大的顺序从后往前堆叠.负值的设定位置元素位于静态定位元素和非设定位置浮动元素之下
一 静态定位模型
position:static;默认是static;
静态元素的开始位置由前一个静态元素的位置确定.静态元素的
尺寸,内边距,边框,和外边距决定了下一个元素的开始位置.相邻元素的垂直外边距会
合并在一起,最终的外边距是两个相邻元素外边距的较大值将左右外边距设置为auto,可以使
已设定尺寸的静态块级元素居中显示.
二 绝对定位模型
position:absolute;
百分数是相对于最近定位祖先元素的尺寸而言,而非父元素的尺寸.将元素的left,right,top,bottom,设置为
auto,可以使它恢复原先在常规流中的位置.与浮动元素不同,绝对元素不会自动排列.不会受其他元素影响,也不会影响别的元素.
如果一个元素的所有子元素都设置为绝对定位,那么它的高度会变为
0,所有它的子元素都离开了常规流.-
如果不存在定位祖先元素,会根据
<body>来定位绝对定位居中,一般元素
div{ position:absolute; width:200px; height:200px; margin:0 auto; border:1px solid blue; /*left:0;*/ 这两条没用,没有影响 /*right:0;*/ }绝对定位居中,静态行内元素
对于静态行内元素,如em,strong,span等,但是不包括行内可替换元素(input,img,textarea等),使用绝对定位模式absolute时,width和right可以使用为了要居中,需要额外的加上
left:0;和right:0;使margin:0 auto;可以正常的生效.
注意,这里left和right必须是0才行.#em{ position:absolute; width:200px; height:200px; margin:0 auto; border:1px solid blue; left:0; right:0; }
三 固定定位模型
position:fixed;可以将任意元素变为固定位置元素
-
切记:固定定位的元素位置是相对于
🎜위치를 설정하는 요소에 배치된 상위 요소가 없으면窗口而定,而非<body>는 위치 지정 상위 요소가 됩니다. 즉,<body>가 기본 위치 요소입니다. 🎜🎜🎜🎜최근 위치 지정 요소는 유효한 상위 요소여야 합니다(상대|절대|고정). . CSS는 문서의 모든 요소에 대한 위치 지정을 지원하지 않습니다. 🎜🎜🎜🎜position:relative; 이 방법을 사용하면 위치가 지정된 상위 요소를 만드는 데 매우 좋은 방법입니다. 규칙적인 흐름을 유지하고 절대 위치 지정을 달성하는 레이아웃 🎜🎜원자적 표시🎜위치가 설정된 요소는원자적으로 표시됩니다. 즉, 외부 요소는 정적 하위 요소, 인라인 콘텐츠 및 배경 사이에 표시됩니다.상대 위치 지정, 절대 위치 지정 및 고정 위치 지정모드를 사용하면overflow:scroll|auto도 원자적으로 표시됩니다🎜🎜🎜🎜 위치를 설정하는 정적 블록 수준에서 겹침이 발생하면 인라인 내용은 겹치지 않지만테두리와 배경은 겹쳐집니다.텍스트는 겹치지 않지만 🎜🎜z-index🎜모든 요소에 적용되며 기본값은 auto🎜
🎜🎜입니다. 🎜z-index는 전역 속성이 아니지만 z-index는 가장 최근에 배치된 조상 요소에 의해 결정됩니다. 루트 요소 html은 지정된 숫자 값을 사용하여 위치가 지정된 각 요소를 생성합니다. z-index는 로컬 로컬 스택 컨텍스트를 생성합니다. 🎜🎜🎜🎜정적 배치 요소는 문서가 나타나는 순서에 따라 뒤에서 앞으로 쌓입니다. 🎜🎜🎜🎜 위치 요소를 설정하면 문서 요소가 나타나는 순서가 무시됩니다. , 그러나 z-index 값이 작은 것부터 큰 것 순서에 따라 뒤에서 앞으로 쌓입니다. 음수 값의 위치 설정 요소는 정적으로 위치된 요소와 위치가 지정되지 않은 부동 요소 아래에 위치합니다.🎜🎜🎜🎜🎜정적 위치 지정 모델 🎜🎜position:static; 기본값은 static입니다.🎜
🎜🎜🎜정적 요소의 시작 위치는 다음과 같습니다. 이전 정적 요소의 위치는 정적 요소의크기, <code>padding,border및margin다음 요소의 시작 위치를 결정합니다. 🎜🎜🎜🎜인접 요소의 세로 여백.병합되며 최종 여백은인접한 두 요소의 여백 중 더 큰 값🎜🎜🎜🎜왼쪽 및 오른쪽 여백을 자동으로 설정합니다.설정된 크기의정적 블록 수준요소를 중앙에 배치합니다.🎜🎜🎜🎜🎜 2. 절대 위치 지정 모델🎜🎜position:absolute;🎜
🎜 🎜🎜백분율은 가장 최근에 배치된 상위 요소의 크기를 기준으로 하며,부모가 아닌 요소코드> 크기는 🎜🎜🎜🎜왼쪽, 오른쪽, 위쪽을 설정합니다. , 요소의 하단을auto로 설정하면 일반 흐름에서 원래 위치를복원할 수 있습니다. 🎜🎜🎜🎜플로팅 요소와 달리 절대 요소는 자동으로 정렬되지 않습니다. 다른 요소의 영향을 받지 않으며 다른 요소에도 영향을 미치지 않습니다. 🎜🎜🎜🎜요소의 모든 하위 요소가 절대 위치로 설정되면 높이는0이 되고 모든 요소는 하위 요소는 일반 흐름을 벗어납니다. 🎜🎜🎜🎜위치가 지정된 상위 요소가 없으면<body>위치 지정🎜🎜절대적으로 위치 지정되고 중앙에 있는 일반 요소를 기반으로 합니다. rrreee🎜절대적으로 배치되고 중앙에 있는 정적 인라인 요소🎜em, Strong, SPAN 등과 같은 정적 인라인 요소의 경우이지만 인라인 교체 가능한 요소(input, img, textarea 등)는 포함하지 않습니다. 절대 위치 지정 모드를 사용하면 너비와 오른쪽을 중앙에 배치하려면left:0;을 추가하여 margin:0을 자동으로 적용해야 합니다. 일반적으로.
여기서는 왼쪽과 오른쪽이 0이어야 합니다. 🎜rrreee🎜🎜🎜🎜세 가지 고정 위치 지정 모델🎜🎜position:fixed; 위치 요소 🎜
🎜🎜🎜 기억하세요: 고정 위치 요소의 위치는창을 기준으로 하고non은 가장 가까운 위치의 조상을 기준으로 합니다` , 그리고 페이지가 스크롤될 때 요소는 스크롤되지 않습니다.🎜 페이지를 기준으로 위치 지정하기 때문에
가장 가까운 위치의 조상이 필요하지 않습니다不需要最近定位祖先设置时最好以top,left来进行偏移定位,当同时设置top,left,bottom,right时,会
优先使用top和left的值,只有当top和left不存在时,bottom和right才会生效
四 相对定位
position:relative;
使用left和top来改变元素位置,left和top默认是auto,auto会使相对定位元素保持在常规流中原有位置.
任何元素都可以设置position:relative;从而其绝对定位的后代元素都可以相对于它进行定位.
五 浮动定位与复位
使用float:left;和float:right;可以使元素离开常规流.
使用float:none;默认是none,可以覆盖元素的其他浮动规则,也可以避免继承浮动
浮动元素不会影响块级框的位置,而只影响行内元素
clear:left;clear:right;clear;both;
任意元素都可以设置为浮动元素,clear适用于表格,块级元素和浮动元素
clear 不适用于
行内,绝对定位或固定定位
먼저 사용됩니다. 상단과 왼쪽이 존재하지 않을 경우에만 하단과 오른쪽이 사용됩니다. 적용됩니다4개의 상대 위치 지정
- position:relative;
- 모든 요소는 위치 설정: 상대 요소를 사용하여 절대 위치에 있는 하위 요소를 기준으로 위치를 지정할 수 있습니다.
- 5개의 부동 위치 지정 및 재설정 사용 float:left; 및 float:right; 요소가 일반 흐름을 벗어나도록 합니다.
인라인, <code>절대 위치 또는 고정 위치 요소에는 적용되지 않음 🎜🎜🎜🎜🎜 여섯 가지 상대 부동 위치 지정🎜🎜🎜float를 사용하면 일부 요소가 부동 요소로 만들 수 있으며 상대 요소도 사용할 수 있습니다. 부동 요소는 상대 위치 지정으로 설정됩니다. 상대 부동 요소는 부동 요소가 있는 일반 흐름에 여전히 위치합니다. 왼쪽과 위쪽을 사용하여 흐름에서 오프셋 위치를 설정할 수 있습니다. 🎜🎜🎜🎜🎜위치:상대적; 및 위치:정적; 절대 및 고정으로 설정하면 표시 결과가 불확실합니다. 🎜🎜🎜🎜🎜scattered🎜🎜🎜🎜Css에서 매개변수 값이 0이면 단위를 추가하지 마세요. 🎜🎜🎜🎜 브라우저는 요소의 콘텐츠를 렌더링하기 전에 먼저 프레임을 렌더링합니다. 배경색, 배경 이미지, 테두리, 마지막으로 브라우저는 프레임 위에 프레임 내용을 렌더링합니다🎜🎜🎜위 내용은 CSS의 위치 지정 모델은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!