标题<h1>是否可能比父div更宽？

Question

我的网页主体包含在<main>元素中。它有一个max-width:800px，并且居中margin:0 auto。

<H1>中的标题<main>是否有可能超过800px - max-width:1000px突出<main> 200px右手边？

见图片：

我承诺我可以给出标题position:absolute然后max-width:1000px，但问题是标题后面的文字显示在标题后面（因为标题已经超出标准流）。有没有办法使用position:absolute AND来确定标题的高度？

Answer 1

尝试在标题上添加负边距。

CSS：

 h1 { 
     margin-right: -200px;
     max-width: 1000px;
 }

Answer 2

是的，这是可能的，你的运气对你微笑;） 这是一个示例代码：

.main-container {
		position: relative;
    width:100%;
		background: grey;
	}
	.main-content {
		position: relative;
		margin: 0 auto;
		
	}
	.yellow {
		position: relative;
		background: yellow;
	}
	.h1-wrap {
		position: relative;
    max-width: 800px;
    height: 100%;
		margin: 0 auto;
    border: 1px solid black;
		background: cyan;
	}
	.h1-wrap > h1 {
		position: relative;
    max-width: 1000px;
    width: 125%;
    background: transparent;
		z-index: 99;
	}

<div class="main-container">
		<div class="main-content">
			<div class="h1-wrap">
				<h1>Some texts outside of .h1-wrap <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nesciunt voluptatem vel, nam, veniam autem ullam quisquam minima doloremque quae obcaecati molestiae deserunt sapiente fugiat. Laudantium nisi saepe, totam harum! lorem</h1>
			</div>
		</div>
	</div>
	<h1 class="yellow">Another text relative to .main-container</h1>