CSS教程:position 绝对定位的问题

2016-02-19 23:18 9 1 收藏

下面是个CSS教程:position 绝对定位的问题教程，撑握了其技术要点，学起来就简单多了。赶紧跟着图老师小编一起来看看吧！

【 tulaoshi.com - Web开发】

今天做页的时候，遇到了一个问题：div无法对父对象绝对定位。

div id="fa"
div id="so" style="position:absolute; top:0; right:12px"
/div
/div

但是发现无论怎么调整都是针对body定位，郁闷！

看了下css手册，也没发现有什么不对。到网上查了下，发现了这么一句话：absolute 脱离文档流，通过 top,bottom,left,right 定位，选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

看完后豁然开朗，代码修改如下，

div id="fa" style="position:relative;"
div id="so" style="position:absolute; top:0; right:12px"
/div
/div

犯了个低级错误！真丢人！难道我的css手册太老了？

来源:http://www.tulaoshi.com/n/20160219/1629613.html

上一篇：怎样在EXCEL中为数据批量添加￥和%等特殊符号
下一篇：学习CSS布局网页的一些实例

看过《CSS教程:position 绝对定位的问题》的人还看了以下文章更多>>

CSS层的应用及其定位（绝对定位和相对定位）

标签： Web开发

层的随意定位的特性给网页设计者带来的很大的方便，但同时也带来了一定的麻烦。为什么这样说呢？大家都知道，为了让网页能够自动地适应用户设置的分辨率，在网页制作过程中人们采用了百分比的设置方式，从而页面的所有元素从新排版，保证原来的格式。但如果你在页面上使用了层，你会发现当浏览器大小改变时，层的位置却没有改变，结果它和...

CSS中关于相对定位和绝对定位

标签： Web开发

style body {margin: 30px; font-size:9pt;} .a, .b, .c, .d, .e { width: 100px; height: 100px; margin: 5 auto; color: #fff; background: #000; } .aa, .bb, .cc, .dd, .ee { top: 10px; left: 10px; width: 10px; ...

CSS教程：IE BUG消失的绝对定位元素

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

IE 一如既往地带来问题。真的，我觉得 IE 坚持自己的一套无所谓，不支持或者不完全支持标准也无所谓。但是，IE6 IE7 IE8 这三个版本都有各自不同的表现，实在是太让人难受了。前两天碰到了这个奇怪的问题：绝对定位的元素，紧邻着两个浮动元素。Firefox 中一切正常，IE6 中绝对定位元素消失了。解决方法：只要别让绝对定位元素紧邻浮动元...

CSS之绝对定位深入研究

标签： Web开发

一、下看个两个例子 1.xhtml代码 body div class="relative" span class="absolute"Test absolute/span /div /body 2.css代码 .relative { position:relative;height:120px; border:2px solid black; } .absolute { position:absolute; top:10px; left:10px; paddin...

Css教程:FireFox正常IE错位的绝对定位元素