> 웹 프론트엔드 > HTML 튜토리얼 > div+CSS布局中的定位笔记_html/css_WEB-ITnose

div+CSS布局中的定位笔记_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:29:26
원래의
1172명이 탐색했습니다.

一、相对定位(position: relative)
       相对定位是是"相对于"元素在文档流中的位置,在使用相对定位时,无论元素是否移动,元素仍占据原来空间.因此移动元素会导致覆盖其它框,
      当相对定位的元素的父级元素是绝对定位时,而父级元素设置了visible:hidden时,如果超出父级元素的位置,则相对定位的元素不可见.
二、绝对定位(position:absolute)
    绝对定位使元素的位置与文档流无关,因此不占据空间,普通文档流中的其它元素的布局就像绝对定位的元素不存在一样。
    如果不存在父级定位元素(不论是父级元素是相对还是绝对),则以画布的右上角为依据。如果存在父级元素。则以父级元素的位置为起始位置。如果父级元素设置了visible:hidden,则超出父级元素的位置,该绝对元素内容不可见。
三、固定定位(position:fixed)
   固定定位是相对定位的一个子类别,差异在于固定元素包含的块是视口,这使我们能够创建总是出在在窗口中相同位置的浮动元素,这使得它在页面滚动时一直出现在屏幕上的相同位置。
四、浮动(float:left|right)
    浮动框可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘,当设置为浮动框时,元素不占据原始位置。  
    如果包含块太窄,无法容纳水平排列的浮动元素,那么其它浮动块向下移动,直到有足够空间的地方,如果浮动元素的高度不同,那第当它们向下移动时可能会被其他浮动元素“卡住”
    边学边加。。这个操作起来有难度

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