放置具有多种样式的元素重叠 [英] place elements with multiple styles overlap

问题描述

我需要帮助放置我的物品.我刚刚开始，所以我需要解释.对您而言显而易见的是，对我而言不一定如此:)我有一个要改进的标题.我希望将右边的两个图像叠加在一起，即保留"图像.按钮在图像上方.另一方面，我想使中间图像居中.我知道样式是重叠的，并且通过chrome控制台尝试的更改不起作用.我无法强加我想要的样式，也不一定能找到阻碍我的样式.如果您有可能给我一些建议，那将是很好的.谢谢.

链接为:

 < div class ="site-branding">< div class ="logo-main";style ="text-align:left;"；>< h1 class =站点标题语义"> Hotel LOGIS LA BORIE enPérigordNoir</h1>< a href =" https://hotel-restaurant-la-borie.fr/"rel ="home"class ="site-logo">< img id ="desktop-logo"src =" https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/Transparent.png"alt ="Hotel LOGIS LA BORIE enPérigordnoir"；宽度="988"height ="614"< img id =视网膜徽标"；src =" https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/Transparent.png"alt ="Hotel LOGIS LA BORIE enPérigordnoir"；宽度="988"height ="614"</a>< div class ="tel-header">电话.[phone]</div;</div>< div class =表单保留">< div class ="logo-logis";>< a href =" https://hotel-restaurant-la-borie.fr/wp-content/uploads/2020/12/sejoursur-logis.mp4"target ="_ blank"rel ＝"noopener noreferrer".< img src =" https://hotel-restaurant-la-borie.fr/wp-content/uploads/2020/12/BANDEAU-MAIL-400X100px-SEJOUR-PLUS-SUR-1.jpg"alt =保留留置权"；style ="width:400px！important;"></a></div>< div class ="group-input">< div class ="logo-logis"；>< a href =" https://www.logishotels.com/fr/hotel/-254254?partid = 568& amp; layout = search& ref = r"target ="_ blank"rel ＝"noopener noreferrer".< img style ="width:105px！important;"src ="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/reservez-1.png""alt =保留留置权"；宽度="112"高度＝"25"/a.< a href =" https://www.logishotels.com/fr/hotel/hotel-la-borie-254254?PARTID = 1012& gclid = Cj0KCQjwvLLZBRDrARIsADU6ojBX_SZoGK4q8u1U_o9D7ym88hIxs1SKPMtarget ="_ blank"< img style ="width:105px！important;"src ="https://hotel-restaurant-la-borie.fr/wp-content/themes/morrison-hotel/images/log-logis.png"</a></div></div></div></div> 

如果我添加转换:translateX(calc(100％+ 10px))到"reservez"按钮给我:

我想使用既包含图像又包含链接的div，就像您在我的代码中看到的那样，然后将display:块放进去，但是将其放在另一个之上是行不通的...图像包含在链接中，因此如果我仅更改img的样式，则将停留在他的位置.

解决方案

您可以使用CSS翻译图像

  img {转换:translateX(calc(100％+ 10px))} 

例如，代码将图片向右移动100％+ 10px

或尝试将两个图像放在同一标签中，然后添加到顶部reservez按钮:

  bottom:0z索引:1 

这将把它放在底部和前面

I need help placing my items. I'm just starting out so I need explanations. What will seem obvious to you, will not necessarily be so for me :) I have a header that I want to improve. I would like the two images on the right to be superimposed, ie the "reserve" button is above the image. On the other hand, I would like to get to center the middle image. I know the styles are overlapping and the changes I tried through the chrome console are not working. I can't impose the style I want and I can't necessarily find the style that blocks me. If it's possible for you to give me some advice that would be great. Thank you.

The link is : https://hotel-restaurant-la-borie.fr/

HEADER

<div class="site-branding">
    <div class="logo-main" style="text-align:left;" >
        <h1 class="site-title semantic">Hotel LOGIS LA BORIE en Périgord Noir</h1>          
            <a href="https://hotel-restaurant-la-borie.fr/" rel="home" class="site-logo"><img id="desktop-logo" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/Transparent.png" alt="Hotel LOGIS LA BORIE en Périgord noir" width="988" height="614">
                <img id="retina-logo" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/Transparent.png" alt="Hotel LOGIS LA BORIE en Périgord noir" width="988" height="614">
            </a>
    <div class="tel-header" >Tel. [phone]</div>
                </div>              
                    <div class="form-reservation">
                        <div class="logo-logis" >
                            <a href="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2020/12/sejoursur-logis.mp4" target="_blank" rel="noopener noreferrer">
                                <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2020/12/BANDEAU-MAIL-400X100px-SEJOUR-PLUS-SUR-1.jpg" alt="lien de réservation" style="width: 400px !important;">
                            </a>
                        </div>
                        <div class="group-input" >  
                            <div class="logo-logis" >
                                <a href="https://www.logishotels.com/fr/hotel/-254254?partid=568&amp;layout=search&amp;ref=r" target="_blank" rel="noopener noreferrer">
                                    <img style="width: 105px !important;" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/reservez-1.png" alt="lien de réservation" width="112" height="25"></a>
                                        <a href="https://www.logishotels.com/fr/hotel/hotel-la-borie-254254?PARTID=1012&amp;gclid=Cj0KCQjwvLLZBRDrARIsADU6ojBX_SZoGK4q8u1U_o9D7ym88hIxs1SkPMDf8VeswMveqWXBDF70HFsaApIXEALw_wcB" target="_blank">
                                            <img style="width: 105px !important;" src="https://hotel-restaurant-la-borie.fr/wp-content/themes/morrison-hotel/images/log-logis.png"></a>
                            </div>  
                         </div>     
                    </div>  
                </div>

If I addtransform: translateX(calc(100% + 10px)) to the "reservez" button it gives me :

I wanted to use the div containing both images and links as you can see on my code and put display : block but it doesn"t work to have it one above the other... The images are included in a link so if I change only the style of the img the stays at his place.

解决方案

you could translate the image by using css

img{
  transform: translateX(calc(100% + 10px))
}

the code move the image to right by 100% + 10px for example

or try to put the two images in the same tag then add to the top reservez button:

bottom:0
z-index:1

this will put it on the bottom and front

这篇关于放置具有多种样式的元素重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！