CSS 포지셔닝 및 응용 시나리오 분석

웹 페이지를 개발할 때 레이아웃에 CSS의 위치 지정 위치 속성을 유연하게 사용하면 좋은 결과를 얻을 수 있다는 것을 모두 알고 있습니다. 이번 글에서는 위치 관련 지식 포인트와 일반적으로 사용되는 장소를 정리했습니다. CSS 친구들을 배우면 참고할 수 있습니다.

<script>ec(2);</script>

먼저 position 속성에 대해 자세히 설명합니다.

CSS3에서는 위치를 이렇게 설명합니다

요약은 다음과 같습니다.
static이 기본 레이아웃이고 topleft가 설정되어 있습니다. . 속성은 아무런 영향을 미치지 않습니다.
relative는 상대 레이아웃이며 왼쪽 상단으로 설정됩니다. . 파일의 컨트롤을 기준으로 합니다.
absolute는 절대 위치 지정이며 왼쪽 상단으로 설정됩니다. . 전체 페이지에 따라 달라집니다.
fixed는 브라우저 창을 기준으로 배치되며, 설정된 위쪽/왼쪽 속성은 브라우저 창의 위치를 ​​기준으로 합니다.

또한 내 코드를 테스트한 후:
1. . 기본, 절대 및 고정 레이아웃 속성 중 하나의 위치는 상위 컨트롤의 위치를 ​​기준으로 변경됩니다.
2.상대 상대 위치 지정, 상위 컨트롤이 있는 경우 동일한 레이어의 가장 가까운 상위 컨트롤이 아닌 가장 가까운 상위 컨트롤을 기준으로 합니다. 형제 통제가 이어졌습니다.
3.static은 다른 덮는 레이어에는 영향을 주지 않습니다.

그런 다음 코드를 통해 위의 결론을 증명해 보겠습니다.

Case 1

HTML:

<p id="zero">
            <p id="one">one</p>
            <p id="two">two</p>
            <p id="tree">tree</p>
</p>

CSS:

　　　　　　  #zero{
                width:200px;
                height: 200px;
                margin: 100px 500px;
                background: black;
    
                z-index: 0;
            }
            #one{
                width: 100px;
                height: 100px;
                position: relative;
                top: 50px;
                left:20px;
                background: red;
                z-index: 1;
            }
            #two{
                width: 100px;
                height: 100px;
                position: absolute;
                top: 190px;
                
                background: yellow;
                z-index: 2;
            }
            #tree{
                width: 100px;
                height: 100px;
                position: fixed;
                top: 250px;
                left: 600px;
                background: deepskyblue;
                z-index: 3;
            }

여기서 ID가 1인 p가 상위 컨트롤에 상대적인 레이아웃임을 볼 수 있습니다.

사례 2:

CSS:

                                 

여기에서 상대 위치 지정이 비교적 최근에는 동일한 상위 컨트롤이 아닌 상위 컨트롤임을 알 수 있습니다.

사례 3: 부모 p:

HTML

       
               #first{
               width: 200px;
                height: 200px;
                background: black;
                margin-top: 100px;
                z-index: 1;
            }
            #second{
                margin-top: 10px;
                margin-left:10px;
                width: 150px;
                height: 150px;
                background: yellow;
                z-index:2;
            }
            #thrid{
                width: 100px;
                height: 100px;
                position:relative;
                background: red;
                top: 30px;
                left: 30px;
                z-index: 1;
            }

CSS

부모 컨트롤이 없는 경우 상대 위치 지정은 형제 관계 컨트롤을 기준으로 합니다.

CSS3의 z-index 설명

위치 개발의 일반적인 응용 프로그램

1. 웹 페이지 양쪽의 플로팅 창(플레이어, 상단 버튼, 플로팅 광고, 기능 버튼 등)

2. 위에.

3. 팝업 창 기능을 구현하기 위해 p를 숨깁니다. (p의 위치와 z-index를 설정하여 p의 위치와 모양을 제어합니다.)



그 중 1과 3은 간단한 위치 설정만으로 비교적 간단합니다. =고정, 왼쪽 상단, z-인덱스 달성 가능, 여기서는 설명 없음

사례 2:

상단에서 탐색 막대의 높이가 1인 경우 js 함수를 호출하여 스크롤 막대의 위치를 ​​판단합니다. 초과하면 내비게이션 바 위치를 고정하려면 위치를 고정으로 설정하고, 그렇지 않으면 위치 정적 및 마링과 같은 속성은 변경되지 않은 상태로 유지됩니다.

JS:


　　

<p id="out"></p>
<p id="out1"></p>

HTML:


　

 #out{
                margin-top: 50px;
                width: 200px;
                height: 200px;
                background: black;
                z-index: 1;
            }
            
            #out1{
                width: 200px;
                height: 200px;
                background: yellow;
                position: relative;
                z-index: 3;
                top:10px;
            }

적절한 CSS를 설정하여 원하는 스타일을 제어하세요.

관련 권장 사항:


css의 위치 속성 정보

css 부동 속성 및 위치:절대 비교

css: 목록 스타일 위치의 사용 및 정의

위 내용은 CSS 포지셔닝 및 응용 시나리오 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!