div+css相对定位和绝对定位用法实例详解(国外英语资料).docVIP

div+css相对定位和绝对定位用法实例详解(国外英语资料) Share 25 CSS3 animation buttons and menu tutorials CSS example tutorial: the ten step, learn to use CSS site Cao Peng CSS/ cascading style sheet video tutorials An example of the personalized navigation menu produced by DIV+CSS Learn how to apply CSS filters to pictures in web pages Key words: div+css relative positioning and absolute positioning This article introduces the concept of relative positioning of CSS relative, which will appear in the location of an element if it is relatively positioned. CSS relative relative positioning The element box, which is set relative to the location, offsets a distance. The element still retains its pre - positioned shape, and the space it originally occupies remains. CSS relative positioning Relative positioning is a very easy to master concept. If an element is positioned relative to it, it will appear in its place. Then you can move the element relative to its starting point by setting the vertical or horizontal position. If you set top to 20px, the box will be 20 pixels below the top of the original position. If the left is set to 30 pixels, the 30 pixel space is created on the left of the element, that is, to move the element to the right. #box_relative { Position: relative; Left: 30px; Top: 20px; } As shown in the following figure: Note that the element still occupies the original space, regardless of whether it is moving or not, when using relative positioning. Therefore, the moving element causes it to overlay other boxes. Example of CSS relative positioning html head style type= text/CSS H2.pos_left {Shanghai, Katie, finance, 6/, position:relative, left:-20px} H2.pos_right {position:relative; left:20px} /style /head body h2, this is the title /h2 in the normal position h2 class= pos_left this title moves /h2 to the left relative to its normal position h2 class= pos_right this title moves /h2 to the right relative to its normal position The p relative positioning moves the element acco