将具有多种样式的元素重叠[重复]

Posted 2023-03-21

【中文标题】将具有多种样式的元素重叠[重复]

【英文标题】：place elements with multiple styles overlap [duplicate]

【发布时间】：2021-03-27 21:52:15

【问题描述】：

我需要帮助放置我的物品。我刚刚开始，所以我需要解释。对你来说似乎很明显的事情，对我来说不一定如此：) 我有一个我想要改进的标题。 我想把右边的两个图像叠加起来，即“保留”按钮在图像上方。 另一方面，我想将中间图像居中。 我知道样式是重叠的，并且我通过 chrome 控制台尝试的更改不起作用。我不能强加我想要的风格，也不一定能找到阻碍我的风格。 如果你有可能给我一些建议，那就太好了。谢谢。

链接是：https://hotel-restaurant-la-borie.fr/

标题

<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"   >
                <img id="retina-logo" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/Transparent.png"   >
            </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"  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"   ></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>

如果我将transform: translateX(calc(100% + 10px)) 添加到“reservez”按钮，它会给我：

我想使用包含图像和链接的 div，正如您在我的代码中看到的那样，并放置 display : block 但将它放在另一个之上是行不通的...图像包含在链接中，所以如果我只更改 img 的样式，则留在他的位置。

【问题讨论】：

嗨奥尼修斯！共享代码会很有帮助，以便每个人都能够帮助您

好吧，很抱歉，我没有这样做，因为我认为拥有该链接会对帮助者更有帮助。谢谢你的建议。

【参考方案1】：

您可以使用 css 翻译图像

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

例如，代码将图像向右移动 100% + 10px

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

bottom:0
z-index:1

这将把它放在底部和前面

【讨论】：

感谢您花时间回答并帮助我！当我将“transform: translateX(calc(100% + 10px))”添加到“reservez”按钮时，该按钮就在底部的“logis”图像上方。我正在编辑我的帖子，所以你可以看到:)

简单只需添加 top:0 而不是 bottom:0

【参考方案2】：

对不起，我应该解释得更好，这是我所说的一个例子

<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"   >
                <img id="retina-logo" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/Transparent.png"   >
            </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"  style="width: 400px !important;">
                            </a>
                        </div>
                        <div class="group-input" >  
                            <div class="logo-logis" style="position:relative;height:120px">
                                <a href="https://www.logishotels.com/fr/hotel/-254254?partid=568&amp;layout=search&amp;ref=r" target="_blank" rel="noopener noreferrer" style="position:absolute;bottom:0;left:0;z-index:1">
                                    <img style="width: 105px !important;" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/reservez-1.png"   >
                                 </a>
                                 <a href="https://www.logishotels.com/fr/hotel/hotel-la-borie-254254?PARTID=1012&amp;gclid=Cj0KCQjwvLLZBRDrARIsADU6ojBX_SZoGK4q8u1U_o9D7ym88hIxs1SkPMDf8VeswMveqWXBDF70HFsaApIXEALw_wcB" target="_blank" style="position:absolute;top:0;left:0">
                                    <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>

【讨论】：

尝试使用价值观并调整到你想要的。

对不起我的英语

你的英语很完美，我的为空！！！我的解释错了......我本来希望图像上方的按钮但在向上/向下方向没有叠加我不知道如何用英语解释它，因此我的解释是错误的。 ..