热搜:NVER node 开发 php

css样式布局中position的那些事儿_html/css_WEB-ITnose

2024-11-21 12:20:01
css样式布局中position的那些事儿_html/css_WEB-ITnose

哎,页面布局及设计开发,对于一个一直从事后台开发来说?丝来说,确实是件很费时、费力,很艰难的一件事。


今晚是想实现把多张重叠在一起,或是标记一张图片中不同的位置然后赋以超链接。花了一晚上的时间,才算初步搞定,大致明白了以下几个css属性用法。


【1】将标签设置为float,和同事讨论:

html的标签有块级和行级(至于那些是块级,可百度之),每个块级会占用html文档的一行(之所以是一行,是因为块级后面会带有换行)。如果把块级标签设置为float时,则标签:(1)脱离原来父级标签。(2)可以在一行进行显示。


【2】position设置为fixed。

fixed是相对于整个浏览器。有兴趣的同学可以试验下,把一个有大小的标签设置为fixed,缩放浏览器,使浏览器产生滚动条(上下或左右),当拉动滚动条时,被设置成fixed的标签是不会改变其位置的。


【3】position设置为absolute。

absolute是相对于最近的父亲标签。依然是上面的那个试验,当拉动滚动条时,被设置成absolute的标签也会跟着html文档位置的改变而变动。


【4】position设置为relative。

relative是相对于原来该标签的位置。


下面结合今晚我做是试验图,来看下效果:


(1)a线是absolute

(2)b线是fixed。

上面图我主要的目的是,把圆盘中make1~8的位置给标记出来,然后给以超链接,具体的代码为:

mydw			makeR1		makeR2		makeR3		makeR4		makeR5		makeR6		makeR7		makeR8