仓酷云

标题: 来一发CSS教程:position属性 [打印本页]
作者: 仓酷云    时间: 2015-1-16 00:04
标题: 来一发CSS教程:position属性
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
position属性可让你让你随便把持一个特定元素在扫瞄器那边和怎样显现。例如说我们用position:fixed让一个图片显现在扫瞄器的左上角.即便呈现转动条他仍然能够在扫瞄器的左上角.posotion属性有4个取值.因为static为默许的体例。以是实践上可用的值只要3个为了便利浏览~
以下统称为：流动(fixed)、绝对(relative)、相对(absolute).
第1：流动定位(fixed)
流动定位可让某一元素流动在屏幕的某个地位.其效果和背景的background-attachment:fixed属性类似！可是IE6和更早的版本不撑持.以是以下例子请在非IE6以下扫瞄器下扫瞄
例子：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metaname="author"content="aslen"/><metaname="Copyright"content="www.gongchang.com"/><style>*{margin:0;padding:0}</style></head><body><divstyle="position:fixed;height:50px;width:50px;background:#f00;left:50px;top:50px;"></div><br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行<br/>换行</body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
第2：绝对定位(relative)
绝对定位是根据设置定位属性的4个偏向上的恣意值来完成绝对与其原本在文档中一般显现的地位的偏移；
当绝对定位的元素偏移出其原本的文档流的地位：其他元素仍旧以为谁人地位为其的逻辑文档流地区.而不会往补上往，固然我们感官上以为那边是没有器材的~
例子：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="aslen"/><metaname="Copyright"content="www.gongchang.com"/><styletype="text/css">*{padding:0;margin:0}</style></head><body><divstyle="width:500px;background:#CC9900;height:30px">1</div><divstyle="width:500px;background:#ff0000;height:30px;position:relative;left:10px;top:20px;">2</div><divstyle="width:500px;background:#CC9900;height:30px">3</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
个中第2个色块就是相对其原本的文档流中的地位根据left:10px;top:20px;的定位属性值举行偏移.
厥后面的第3个色块仍然以为后面的空缺（就是第3的底本的文档流的地位）为第3个色块的文档流地区则不会主动添补上往.
当绝对定位的父元素呈现转动条时，IE扫瞄器的特别情形
例子：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="aslen"/><metaname="Copyright"content="www.gongchang.com"/><styletype="text/css">*{padding:0;margin:0}</style></head><body><divstyle="width:500px;height:150px;overflow:auto;">我是一般文档流的笔墨<divstyle="width:300px;background:#ff0000;height:20px;position:relative;">我是绝对定位，拉动转动条看我在那边</div>我是一般文档流的笔墨<br/>我是一般文档流的笔墨<br/>我是一般文档流的笔墨<br/>我是一般文档流的笔墨<br/>我是一般文档流的笔墨<br/>我是一般文档流的笔墨<br/>我是一般文档流的笔墨<br/>我是一般文档流的笔墨<br/>我是一般文档流的笔墨<br/>我是一般文档流的笔墨<br/>我是一般文档流的笔墨<br/>我是一般文档流的笔墨<br/>我是一般文档流的笔墨<br/>我是一般文档流的笔墨<br/></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
当绝对定位的父元素有转动条的时分，该绝对定位元素再IE的体现很诡异（厥后面的元素仍然以为谁人地位为该元素的默许地位，而体现出绝对定位的特征，可是拉动转动条时，在FF下一般即绝对定位的元素和文档一同转动，可是在IE系列内里，绝对定位的色块仍然在原地不动，此时元素的特征有点像相对定位）
当绝对定位同时具有定位属性的4个偏向的值和margin属性。绝对定位的定位属性toprightbottomleft和margin-topmargin-rightmargin-bottommargin-left;各个偏向上一至的时分其值会发生叠加效果，而依照偏向实行叠加后的数值的偏移
例子：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="aslen"/><metaname="Copyright"content="www.gongchang.com"/><styletype="text/css">*{padding:0;margin:0}</style></head><body><divstyle="height:50px;background:#f00;position:relative;left:100px;margin-left:-100px;"></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]


第3：相对定位(absolute)
当元素设置相对定位后.则会从一般的文档流中离开.厥后面的元素会完整无视这个相对定位的元素.就仿佛一般文档流中不存在这个元素一样.然后依据离其比来的一个具有position属性的父工具的边沿为定位基点（假如没有无如许一个父工具那末默许根据窗口元素定位），依据设置定位属性的4个偏向的值来完成相对的定位结构.
例子：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="aslen"/><metaname="Copyright"content="www.gongchang.com"/><styletype="text/css">*{padding:0;margin:0}</style></head><body><divstyle="width:500px;background:#CC9900;height:30px">1</div><divstyle="width:500px;background:#ff0000;margin-top:1px;height:30px;position:absolute;left:10px;top:20px;">2</div><divstyle="width:500px;background:#CC9900;height:30px">3</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
我们能够看到.当色块2设置相对定位以后.前面的第3色块无视其存在，主动弥补到一般的文档流中（这个是依据窗口元素定位）
我们再来看一下IE中根据窗口元素定位的一个特别情形
例子：
运转代码框
<?xmlversion="1.0"encoding="utf-8"?><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="aslen"/><metaname="Copyright"content="www.gongchang.com"/><styletype="text/css">html{background:#0099FF;padding:100px;}body{color:#FFFFFF;background:#FF00FF;padding:100px;width:400px;position:relative;}.wapper{background:#FF6600;}.abso{width:200px;height:200px;border:1px#000solid;position:absolute;left:0px;top:0px;background:#00FF00}</style></head><body><divclass="wapper"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>此DEMO测试IE6的Quirksmode形式和position定位参考的窗口元素<divclass="abso">相对定位</div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
此DEMO与position:absolute的定位事情体例有关~只是作为IE中特别的情形列出来
除下面的基础的position:absolute特性，其另有上面几点；
1.假如我们只设置了position:absolute而没有设置定位属性的4个偏向值的话.那末该相对定位的元素仍然遵守其在文档流中的一般地位，它仍旧受前一元素的文档流地位影响，依照一般文档流举行结构。只不外如今是从一般的文档流中抽出.厥后面的元素会无视其存在.而主动补上往.由于相对定位的元素是不占文档流的结构空间的。
例子：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="aslen"/><metaname="Copyright"content="www.gongchang.com"/><styletype="text/css">*{padding:0;margin:0}</style></head><body><divstyle="width:500px;background:#CC9900;height:30px">1</div><divstyle="width:200px;background:#ff0000;position:absolute;height:30px">2</div><divstyle="width:500px;background:#CC9900;height:30px">3</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
例子中第2个白色的色块就是一个只具有position:absolute属性的元素，它仍旧在一般的结构地位出现，只不外前面的元素会无视其存在
2.相对定位会主动把一个元素转化为块元素
例子：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="aslen"/><metaname="Copyright"content="www.gongchang.com"/><styletype="text/css">*{padding:0;margin:0}</style></head><body><spanstyle="width:500px;background:#CC9900;height:30px;position:absolute">我们晓得行间元素设置宽、高是被疏忽的，你看看这个页面的显现</span></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
依照尺度的衬着体例.行间元素设置的宽度和高度是被疏忽的，可是当给元素相对定位以后，该元素会具有块元素的特征，而能够设置宽度和高度（固然相对定位的元素不占结构空间）


3.在IE下没有设置定位属性4个偏向的值的相对定位的块元素的体现是inline-block再FF下其是block
例子：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="aslen"/><metaname="Copyright"content="www.gongchang.com"/><styletype="text/css">*{padding:0;margin:0}</style></head><body>这是一行一般的笔墨~我们晓得只需是块元素不论他的宽度几他一直是占一行的<divstyle="width:500px;background:#ff0000;position:absolute;height:30px;">我是一个具有相对定位属性的块元素~你在IE下看我再那边，你再FF下看我再那边</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
这个实际上是扫瞄器的差别，在FF下在块元素具有position:absolute属性后，其仍然作为一个块元素，而相对后面的文档流而换行，以是为了一致，在这类利用情形下，能够加上display:inline便可包管各个扫瞄器一致
4.相对定位元素根据其定位基点举行相对定位时会无视其定位基点的padding空间
例子：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="aslen"/><metaname="Copyright"content="www.gongchang.com"/><styletype="text/css">*{padding:0;margin:0}</style></head><body><divstyle="padding:100px;width:500px;position:relative;background:#f00;height:500px;margin:0auto"><divstyle="width:400px;background:#CC9900;height:30px;top:0;position:absolute">我是一个具有position属性；且定位属性为top:0px;你看我再那边</div>我是一般文档流中的笔墨</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
图中的白色地区是一个高度和宽度为500px且padding:100px;由于相对定位元素无视其定位基点的padding属性，以是在顶部出现
5.设置任何一个偏向的定位属性.该相对元素除该偏向依照定位属性的值根据其具有position属性比来的父元素为基点举行定位.其别的偏向上的逻辑地位仍然受前一文档流中的元素影响.依照一般的地位举行结构：
例子：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="aslen"/><metaname="Copyright"content="www.gongchang.com"/><styletype="text/css">*{padding:0;margin:0}</style></head><body><divstyle="width:500px;background:#CC9900;height:30px">1</div><divstyle="width:500px;background:#ff0000;position:absolute;height:30px;left:40px;">我是一个具有相对定位，且只要left:40px这个定位属性；你看再我那边</div><divstyle="width:500px;background:#CC9900;height:30px">3</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
我们能够看到图中的白色地区，除依照left:40这个属性偏移40像素后，其垂直偏向的地位仍然为一般文档流中的地位


6.当元素设置为相对定位后改元素内的浮动会主动扫除
例子：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="aslen"/><metaname="Copyright"content="www.gongchang.com"/><styletype="text/css">*{padding:0;margin:0}li{float:left;width:500px;height:40px;background:fuchsia;list-style:none}</style></head><body><ulstyle="border:1pxbluesolid;width:500px;padding:50px;background:green;position:absolute"><li>我是浮动的元素</li><li>我是浮动的元素</li><li>我是浮动的元素</li><li>我是浮动的元素</li><li>我是浮动的元素</li><li>我是浮动的元素</li><li>我是浮动的元素</li><li>我是浮动的元素</li><li>我是浮动的元素</li><li>我是浮动的元素</li></ul></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
7.当相对定位同时具有定位属性和margin属性、相对定位的的定位属性toprightbottomleft和margin-topmargin-rightmargin-bottommargin-left;各个偏向上一至的时分其值会发生叠加效果，而依照偏向实行叠加后的数值的偏移
例子：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="aslen"/><metaname="Copyright"content="www.gongchang.com"/><styletype="text/css">*{padding:0;margin:0}</style></head><body><divstyle="width:500px;height:50px;background:#f00;position:absolute;left:100px;margin-left:100px;">我一个具有position:absolute;且left:100px;margin-left:100px</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
我们会发明这个白色的色块间隔右边200PX.left+margin-left

小结：
当元素同时具有浮动和相对定位时.相对定位的优先权年夜于浮动.由于浮动受文档的逻辑布局地位限定。而相对定位不会。
以是当相对定位离开文档流，相对定位的元素不受浮动影响.即float:left会生效，
数学上我们晓得.X轴上一个数值Y轴上的一个数值便可断定一个点，感官上leftright属于x轴bottomtop属于Y轴。
我们完整能够设置一个无宽度和高度相对定位的元素同时具有toprightbottomleft来完成其依据其参考的定位基点的父元素的的巨细来自顺应巨细.
可是IE6不撑持.IE6只能辨认left的值而无视right.以是上面例子请在非IE6和一下扫瞄器扫瞄
例子：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="aslen"/><metaname="Copyright"content="www.gongchang.com"/><styletype="text/css">*{padding:0;margin:0}</style></head><body><divstyle="height:500px;background:#f00;position:relative;width:500px;margin:100pxauto"><divstyle="position:absolute;left:100px;top:100px;bottom:100px;right:100px;background:#0066FF">我是相对定位我自顺应我的定位基点的元素</div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
实践使用:（团体的习气）

缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
作者: 简单生活    时间: 2015-1-18 05:02
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
作者: 若相依    时间: 2015-1-24 16:37
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
作者: 愤怒的大鸟    时间: 2015-2-2 11:30
可以使用 CSS 检查工具进行设计。
作者: 透明    时间: 2015-2-7 19:22
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。
作者: 灵魂腐蚀    时间: 2015-2-7 19:22
学Dreamweaver技术的过程其实是一个增加信心的过程。
作者: 精灵巫婆    时间: 2015-2-23 10:22
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
作者: 海妖    时间: 2015-3-7 08:32
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。
作者: 小女巫    时间: 2015-3-14 20:15
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。
作者: 若天明    时间: 2015-3-21 15:40
可以使用 CSS 检查工具进行设计。



欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2