Relative与Absolute组合使用,出问题了求解答!

来源:13-1 CSS3的布局 - css布局模型

慕粉1714545504

2017-01-09 21:36

<!DOCTYPE heml>

<html>

<head>

<meta charset="UTF-8">

<title>盒子模型练习</title>

<style type="text/css">

div{border:0px White solid;}

p{text-indent:2em;}

.tupian{

      width:320;

      height:451;

      position:relative;

}

.jbxx{

    position:absolute;

    width:99%;

  top:0%;

  left:0%;

  color:#ffffff;

  font-weight:bold;

}

</style>

</head>

<body>

<h2>你的名字。</h2>

<div class="tupian">  

    <img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=21b4e70167061d95694b3f6a1a9d61b4/4e4a20a4462309f718e7332b7b0e0cf3d7cad67b.jpg" width="320" height="451">

    <div class="jbxx">

    <p>《你的名字》是由新海诚执导的一部日本动画电影,由神木隆之介、上白石萌音担任主要配音演员,人设是由参与过《我们仍未知道那天所看见的花的名字。》的田中将贺担当,作画导演由曾创作过《千与千寻》、《幽灵公主》的安藤雅司执笔。作品于2016年8月26日在日本上映。中国内地于2016年12月2日上映,分为日语原声中文字幕版和中文配音版2种版本。作品讲述了男女高中生在梦中相遇的幻想故事。</p><div>

</div>

<h4>基本信息</h4>

<p>怎么就不是在图片下面以黑色字体开始呢?怎么就继承了上面的设置呢?</p>

</body>

</html>

http://img.mukewang.com/587390670001a8b803400512.jpg

我是模仿《HTML+CSS基础课程  12-9 Relative与Absolute组合使用》做的,但是从<h4>开始这段我想在图片下面开始,而且想恢复正常的黑色字体,但不知怎么就继承了上面的设置?

12-9的练习代码我试过,在BOX4下面另开一行<p>内容都是正常的,想请问下我错在哪里??

写回答 关注

2回答

  • 梅妮儿mm
    2017-01-09 22:05:31
    已采纳

    因为你的图片是相对位置,不是绝对的占用那一块地方,h4并不是继承了上面的设置,你可以把h4设置为盒子模型,再设置它的top 使它在图片下面。

    慕粉1714...

    非常感谢!

    2017-01-14 16:48:26

    共 1 条回复 >

  • qq_慕虎340508
    2019-03-08 17:28:19

    https://img3.mukewang.com/5c8235680001ac7a08560088.jpg我所标注的地方,<div>应该为</div>

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1228282 学习 · 18431 问题

查看课程

相似问题