怎么才能达到这种效果
先看源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/index.css" />
<title></title>
</head>
<body>
<div>
<h1>春</h1>
<p>盼望着，盼望着，东风来了，春天的脚步近了，一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回
迷藏。风轻悄悄的，草绵软软的。</p>
<p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已
经满是桃儿、杏儿、梨儿！花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，
像眼睛，像星星，还眨呀眨的。</p>
</div>
</body>
</html>
div{
height: 600pxwidth: 416px /*定义盒子高度和宽度*/
border: solid 1px red /*border-width, border-style,和border-color.*/
padding: 115px 4em 0
/*为了避免背景图像重复平铺到边框区域，应禁止他平铺*/
background: url(../img/p3.jpg) no-repeat
/*设计背景图像的定位坐标点为元素边框上的左上角*/
background-origin: border-box /*相对位置*/
background-size: cover
overflow: hidden /*overflow属性指定如果内容溢出一个元素的框，会发生什么。*/
/*visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。*/
}
/*定义标题*/
div h1{
font-size: 18pxfont-family: "幼圆"
text-align: center
}
/*定义文章*/
div p{
text-indent: 2em/*text-indent 属性规定文本块中首行文本的缩进*/
line-height: 2em/*行高*/
font-family: "楷体"
margin-bottom: 2em
}
后面的细节慢慢挑出来演示一下。
很简单啊，你给黑色的div设定相对位置，里面嵌套的红色div设定绝对位置即可<div style=" width:200pxheight:200pxposition:relativeleft:100pxtop:100pxbackground-color:black">
<div style="position:absoluteright:10pxtop:50%height:50pxwidth:50pxmargin-top:-25pxbackground:red"></div>
</div>
唉，乱七八糟。忍不了了！
我先给你按照我的理解说下，然后给你网站去理解吧，我也是从哪里理解的！
文档流的几种：
1.正常文档流。
2.浮动文档流。
3.定位的文档流。
其中你问的是定位。
定位又分为2中：
相对很绝对。
相对定位的文档流，保持占位，仍占据原来正常文档流的位置。在此基础上进行的
left:100px top:100px //一个表示从原来的占位点，向右、下各平移100PX。
绝对定位会脱离文档流，也就是出现了层叠覆盖的情况。
left:100px top:100px 它究竟跑哪里了呢？
这个坐标是以最近定位父元素为参考点的。
知道了这点你就可以计算了。
一般你需要先设置一个相对定位元素，然后在其里面定位绝对定位，这是最常见的！
几个例子：
<div style="width:100px height:100px background-color:#c00">
<p style="width:50px height:50px">
<span style="position:absoluteleft:0 top:0 display:inline-block width:10px height:10px">我绝对定位了</span>
</p>
</div>
这个运行后
没有遇到已定位的父元素，于是BODY作为参照。
<div style="width:100px height:100px background-color:#c00">
<p style="width:50px height:50px background-color:yellow position:relative">
<span style="position:absoluteleft:0 bottom:0 display:inline-block width:10px height:10px background-color:blue"></span>
</p>
</div>
这个例子你自己运行吧。
还有：
<div style="width:100px height:100px background-color:#c00position:relative">
<p style="width:50px height:50px background-color:yellow ">
<span style="position:absoluteleft:0 bottom:0 display:inline-block width:10px height:10px background-color:blue"></span>
</p>
</div>
