如何防止元素在CSS中推送另一个元素？
斯泰西·巴耶
我不熟悉CSS定位，并且正在尝试学习...这也是我在这里的第一个问题。=）
这就是我要做的。
下面是屏幕截图：
看到红色三角形如何将图片向下推到我的页面标题中，从而创建深色的条带？相反，我希望红色三角形（.flag）覆盖在图片上方，就像它像丝带一样悬挂在图片上。
我不确定要为此使用什么代码，但这是三角形（.flag）的CSS：
.flag {
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 60px solid $red;
float: right;
margin-right: 40px;
padding: 1px;
}
的HTML
<div class="new visible-l">
<a href="#">
<h3>NEW?</h3>
<p>Click here to learn more!</p>
</a>
</div>
<h1 class="logo"><a href="#">The Quigley Inn</a></h1>
<ul>
<li><a href="#">Logs</a> |</li>
<li><a href="#">Bulletin</a> |</li>
<li><a href="#">Locations</a> |</li>
<li><a href="#">Directory</a> |</li>
<li><a href="#">Policies</a> </li>
<li class="hidden-l">| <a href="#" class="newhidden">New?</a></li>
</ul>
<div class="flag visible-l"></div>
</section>
<section id="content">
<section id="pageheader">
<img src="http://placekitten.com/1200/400" />
<h1>The Quigley Inn</h1>
</section>
Fahad Hasan |
您需要绝对定位.flag元素，然后使用top和right属性定位元素，如下所示：
.flag {
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 60px solid red;
position: absolute;
right: 40px;
top: //insert appropriate value
}
另一个解决方法是简单地使用margin-top负值（例如）将猫图像/ div向上移动margin-top: -10px。
更新：
请将下面的CSS添加到样式表中：
section#pageheader img {
margin-top: -50px;
}
.flag {
z-index: 9999;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使用CSS根据页面中另一个元素的状态选择一个元素？
- 2
当一个元素悬停并影响CSS中的另一个元素/类时，如何添加悬停效果？
- 3
当另一个元素纯粹悬停在 css 中时，如何更改一个元素的样式属性？
- 4
使用CSS单击另一个元素时如何显示一个元素？
- 5
使用CSS单击另一个元素时如何显示一个元素？
- 6
如何防止div元素受到另一个div元素的框阴影的影响？
- 7
检查一个元素在CSS中是否还有另一个元素
- 8
javascript拖放-防止元素拖放到另一个droppable元素中
- 9
javascript拖放-防止元素拖放到另一个droppable元素中
- 10
如何使用LINQ to MongoDb在文档中另一个数组内部的数组中查找和推送元素
- 11
如何点击一个元素并在另一个元素中添加文本
- 12
围绕另一个元素旋转元素-CSS
- 13
如何根据另一个列表中另一个元素的索引从列表中写出元素？
- 14
悬停在CSS中的另一个元素上时更改元素CSS？
- 15
单击最前面的元素后，如何防止某个元素在另一个元素后面的行为？
- 16
如何选择另一个元素内的元素？
- 17
Selenium“在另一个元素中获取元素”
- 18
单击另一个元素时如何关闭另一个元素
- 19
如何确保一个元素不被另一个（CSS）覆盖？
- 20
如何使用CSS将HTML元素放置在另一个元素上
- 21
如何使用css-in-js在另一个元素上显示div元素？
- 22
如何在Shiny中将CSS元素居中放置在另一个元素之下
- 23
如何使用css / Extjs将元素悬停在另一个元素上
- 24
如何仅删除所选元素中的一个元素，而保留另一个元素？
- 25
选择CSS中具有相同类的另一个元素之前的元素
- 26
如何从另一个向量的另一个第一个元素减去向量中的第一个元素？
- 27
CSS悬停更改另一个元素CSS
- 28
如何从数组中删除与另一个数组中的元素匹配的元素
- 29
如何从另一个数组中的多个元素中选择数组中的元素
我来说两句