CSS 제목이 컨테이너 외부에 부분적으로 표시되도록 이동

Question

필드 세트 내에서 범례가 렌더링되는 기본 방법을 알고 있습니까?

저는 제쳐두고 동일한 것을 달성하려고합니다. 예 :

<aside> 
<h1>heading</h1> 
<p>content</p> 
</aside> 

은 내가 지금이 없다 - 내가 위는 옆 반 내부 반을 원하는

aside { 
    background-color: #e1d8ee; 
    display: block; 
    font-style: oblique; 
    margin-left: 8%; 
    margin-right: 8%; 
    border: 2px solid; 
    border-radius: 7px; 
    border-color: #808080; 
    padding: 1em; 
} 

aside h1, aside h2, aside h3, aside h4, aside h5, aside h6 { 
    display: inline; 
    background-color: #fcc006; 
    margin-left: 1em; 
    margin-top: -12em; 
    padding: 0.3em; 
    font-size: 1em; 
    border: 2px solid; 
    border-radius: 7px; 
    border-color: #808080; 
} 

을 아무리 여백 셋톱 무엇에, 여전히 옆에서 유지 그래서 h {n}은 전설이 fieldset으로가는 것을 제외하고는 - 브라우저가 fieldset 테두리에 범례를 멋지게 표시합니다.

나는 단지 이런 일이 일어나기에 충분한 CSS를 알지 못하고 해결책을 찾기에 적절한 검색 용어를 알만큼 충분하지도 않습니다.

제안 해 주셔서 감사합니다.

Answer 1

당신은 "위치 : 상대"을 사용하여 시도 할 수 및 "최고"를 사용하여 요소의 위치를 ​​

예 :

aside h1, aside h2, aside h3, aside h4, aside h5, aside h6 { 
    display: inline; 
    background-color: red; 
    margin-left: 1em; 
    padding: 0.3em; 
    font-size: 1em; 
    border: 2px solid; 
    border-radius: 7px; 
    border-color: #808080; 
    position: relative; 
    top: -1.5em; 
    }