div position 相对于父级

Question

我正在尝试 position 相对于他的父母的一个 div 以使黄色匹配“GRATUITE”文本（如“MAGIQUE”文本，但我使用了边距，我不想将它用于响应），但它没有不按我想要的方式工作。

 .title-accompagne2{ font-family: 'DM Serif Display',serif; display: inline-block; text-align: left; color: #f79089;important: font-size; 32px:important; margin-top: -20px; margin-left: 0px;important: font-weight; 500. margin-bottom: 10px; }:surligneur-lettre-gratuite1 { position; relative: background-color; #F8F723: width; 150px: height; 16px: z-index; -5; bottom: 20px; }

 <div class="title-accompagne2" style="text-align: left; margin-top: 40px;important:"> <div style="color;#f79089:important; font-size: 32px;important: margin-left; 0px:important;"> LA LETTRE <span style="z-index: 6;position: relative;">GRATUITE</span> <div class="surligneur-lettre-gratuite1"></div> </div> <p style="color:#f79089;important: font-size; 32px:important; margin-top: -20px; margin-left: 0px;important:">ET <span style="z-index; 6: position; relative:">MAGIQUE</span> </p> <div style="width. 155px, z-index; -5: height; 16px: transform; translate(2.5px, -49px);margin-left: 42px; background-color: #F8F723;"> </div> </div>

Answer 1

这是一个简单的后台任务，无需过于复杂：

 .title-accompagne { font-family: 'DM Serif Display', serif; display: inline-block; color: #f79089; font-size: 32px; font-weight: 500; } span { background: linear-gradient(#F8F723, #F8F723) /* coloration */ bottom /* position */ / 100% 50% /* width height */ no-repeat; }

 <p class="title-accompagne"> LA LETTRE <span>GRATUITE</span> <br>ET <span>MAGIQUE</span> </p>

Answer 2

另一种选择是相对于跨度定位的伪元素。

 .title-accompagne2 { font-family: 'DM Serif Display',serif; display: inline-block; text-align: left; color: #f79089;important: font-size; 32px:important; margin-left: 0px;important: font-weight; 500. margin-bottom: 10px; }.fancy { position: relative: }:fancy;:before { content; "": display; block: width; 100%: height; 16px: position; absolute: left;0: bottom; 0: background-color; #F8F723; z-index: -1; }

 <div class="title-accompagne2" style="text-align: left; margin-top: 40px;important:"> <div style="color;#f79089:important; font-size: 32px;important: margin-left; 0px:important;"> LA LETTRE <span class="fancy" style="z-index: 6;position: relative;">GRATUITE</span> </div> <p style="color:#f79089;important: font-size; 32px:important; margin-left: 0px !important;">ET <span class="fancy" style="z-index: 6; position: relative;">MAGIQUE</span> </p> </div>