为了账号安全,请及时绑定邮箱和手机立即绑定

求大神看看代码,为什么绝对定位后,<span>标签下的文字没有移动设置的到右上角?

http://img1.sycdn.imooc.com//5a5e19aa0001861007190213.jpg

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{margin:0;padding:0;}
.demo03{
    width:558px;
    margin-top:20px;
    padding:20px;
    background:blue;
    border:1px #ccc solid;
    margin-left:100px;
    position:relative;
}
.demo03 img{
    float:left;
    margin:-20px 0 0 -120px;
}
.demo03 p{
  font-size:12px;line-height:25px;
}
.demo03 span{
    position:absolute;
    margin-right:20px;
    margin-top:10px;
}
</style>
</head>
<body>
    <div class="demo03">
      <img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" />
      <h1>提示</h1>
      <p>温馨提示:完成任务后,请验证是否与实践描述效果一致,如一致,恭喜您,你已经掌握此技能,否则,请重复学习此节内容。</p>
      <span>一个小时以前</span>
    </div>
</body>
</html>


正在回答

3 回答

.demo03 span{

    position:absolute;

    right:20px;

    top:10px;




跟定位配合,用的是top、left、right、bottom。你那个是构建盒子模型啦

0 回复 有任何疑惑可以回复我~

 position:absolute;绝对定位

0 回复 有任何疑惑可以回复我~

粗心了,回去看了html/css课程12-9,发现组合使用后使用方向定位,不用加margin的,尴尬

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
网页简单布局之结构与表现原则
  • 参与学习       108353    人
  • 解答问题       375    个

入门必杀技之结构与表现相分离,课程会有3个案例,不同角度讲解

进入课程

求大神看看代码,为什么绝对定位后,<span>标签下的文字没有移动设置的到右上角?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信