위치 해석

WBOY
풀어 주다: 2016-09-08 08:29:16
원래의
1938명이 탐색했습니다.

먼저 Position은 문자 그대로 위치를 의미하며 HTML에서 4가지 속성을 갖습니다. static은 정적이며 기본 효과는 특별한 설정이 없습니다. positioning은 계층적 분류를 할 수 없다고 규정합니다. z-index를 통해 수행됩니다.

절대(절대 위치 지정)

절대(절대 위치 지정)는 텍스트 흐름에서 벗어날 뿐만 아니라 텍스트 흐름에서 이 절대 위치 지정 요소를 위한 전용 공간을 남기지 않습니다. 마치 공장에서 한 사람이 떠나면 자연스럽게 다른 사람이 그 자리를 채우는 것과 같습니다. 자연스럽게 밖으로 나가는 부분은 자유체가 됩니다. 절대 위치 지정을 사용하면 TRBL(줄여서 TOP, RIGHT, BOTTOM, LEFT, TRBL)을 통해 요소가 원하는 위치에 있도록 설정할 수 있습니다. 상위 레이어의 위치 속성이 기본값인 경우 TRBL의 좌표 원점은 바디의 좌표 원점에서 시작됩니다.

 상대적 위치 지정(relative positioning)은 텍스트 흐름에서 위치를 위, 아래, 왼쪽, 오른쪽으로만 이동할 수 있습니다. 비록 프레젠테이션 영역이 텍스트 흐름과 분리되어 있지만, 여전히 텍스트 흐름에 있습니다. 그를 위한 장소를 예약하세요. 이는 마치 이주노동자가 다른 곳으로 가는데도 고향에 여전히 그를 위한 전용 장소가 있고 이 장소는 그의 움직임에 따라 변하지 않는 것과 같습니다. 이렇게 하면 분명히 공백이 남게 됩니다. 텍스트 흐름에서 이 부분을 삭제하려면 절대 위치 지정을 사용해야 합니다.

 고정(고정 위치 지정)
브라우저 창을 기준으로 위치가 지정된 고정 위치 지정 요소를 생성합니다.
요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.

다음으로 '삼국지킬'의 예를 들어 포지션 적용에 대해 자세히 이야기하겠습니다.

  
    
        삼국杀
        
    


    
        

            

                    

                    

                    

                    

                    
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

                        
                    

                    
                    

                    

                    

                    

                    

                    
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

            

            
                

                    

                    

                    

                    

                    
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

            


                

                    

                    

                    

                    

                    
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

            


            

                    

                    

                    

                    

                    
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

            

                    
            

                    

                    

                    

                    

                    
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

            


            

                    

                    

                    

                    

                    
                    

                            < li id="c4">
                                                    

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
                            
  • 4
    & lt;/li & gt;
    & lt;/ul & gt;
    & lt;/lt;/div & gt;



    & lt;/div & gt;



    & lt ;/div>
                        
                
                
                < ;img src="image/vhongtao.png" class="k4"/>
                    
                
                    
                
            

                
    < ;/div>
                

                

                  
      急< br />救

                  


                  
      class="x1"

                  
      class="x2"


              
          
          

    관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿