最近调DIV的位置比较头疼,各种position: relative / absolute

google到一篇好文章[http://www.webdevdoor.com/html-css/css-position-child-div-parent/]

如何让子div的位置相对父div的位置固定,而父div的位置可以变动。

重点是:父div一定要有position属性(不管relative还是absolute),子div就可以设置position:absolute,这时子div的位置是相对父div是固定的。

以下自己根据文章自己加了些改动,主要是测试当父div内部追加了div之后,看原来的子div的位置是否受影响,事实证明没影响。

<style>
.parent {
width:250px;
height:250px;
background-color:#CCCCCC;
position:relative;
}

.child {
width:100px;
height:100px;
background-color:#999999;
position:absolute;
//bottom:0px;
//right:0px;
top:100px;
left:100px;
}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<script>
function appendFront(){
$("#parentId").prepend("<div style=\"width:100px;height:50px; top:50px;background-color:#ffffff;\"></div>");
}
</script>
<div id="parentId" class="parent">

<div class="child"></div>
</div>
<a href="#" onclick="appendFront();">click</a>

Position a child div relative to parent container in CSS: [设置 子DIV位置 跟 父DIV相关联]的更多相关文章

  1. 子div设置float后会导致父div无法自动撑开

    本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 注: 文章部分转载 彩泉 - 博客园 原因:内部的DIV因为float:l ...

  2. 怕忘记了CSS中position的absolute和relative用法

    CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中posit ...

  3. 子div设置float后导致父div无法自动撑开的问题

    子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...

  4. css设置div高度与宽度相等的一种方法

    div.category{ width:33%; padding:33% 0 0; } 1.关键在padding:33% 0 0这句代码,通过设置padding-top与宽度相等(padding使用百 ...

  5. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  6. 子DIV块中设置margin-top时影响父DIV块位置的解决办法?

    解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声 ...

  7. IE8"HTML Parsing Error:Unable to modify the parent container element before the child element is closed"错误

    一.IE8报下面错误,解决办法:网页错误详细信息消息: HTML Parsing Error: Unable to modify the parent container element before ...

  8. HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)

    IE8报错误: 用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .N ...

  9. BUG笔记:Win XP IE8下HTML Parsing Error: Unable to modify the parent container element before the child

    [Bug描述]Windows XP IE8的某些版本下页面只显示一部分,其余为空白.IE左下角有惊叹号报错标志,点开后显示字符如下: HTML Parsing Error: Unable to mod ...

随机推荐

  1. NeHe OpenGL教程 第四十八课:轨迹球

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  2. fgets读取文件时的注意事项

    1 文本文件 a.txt 内容如下 2 c代码 FILE *fil; if (!(fil = fopen("/home/rudy/projects/paser/a.txt", &q ...

  3. Embed dll Files Within an exe (C# WinForms)—Winform 集成零散dll进exe的方法

    A while back I was working on a small C# WinForms application in Visual Studio 2008. For the sake of ...

  4. js实现缓冲运动,和匀速运动有点不相同

    缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...

  5. 解决GBK字符转UTF-8乱码问题

    通过以下方法将GBK字符转成UTF-8编码格式的byte[]数组 package test; import java.io.UnsupportedEncodingException; public c ...

  6. Jquery异步上传图片

    网页中这样: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head id=& ...

  7. 解决box-flex不均等分的问题

    我想当你上手css3的时候后一定为他的强大而感到震惊,但是震惊之后带来的一定是苦恼,因为他太TM变态了! 我之所以这么说是因为我今天写box-flex的时候遇到了一个可以让我蛋碎的问题~~~ 首先,b ...

  8. JavaScript 对象 之创建对象 学习笔记

    假设我们有这样的一个需求:记录一个人的 名字和年龄,然后有个方法可以显示这个人的名字和年龄. 按照普通的方法,我们的代码应该是这样的: var person1 = new Object() , per ...

  9. mgo中DBRef-数据查询测试

    下午对数据查询进行了代码测试: package main import ( "crypto/rand" "encoding/hex" "fmt&quo ...

  10. mysql 不允许连接

    错误提示: ERROR 1130: Host '192.168.1.1' is not allowed to connect to this MySQL server的解决方法: 1.改表法.可能是你 ...