我仅使用CSS和Flexbox构建响应页面。我有一个子元素,应该在父元素之外“溢出”,如下所示:
<div class="container-hero">
<div class="hero-content">
<h1>Tech Challenge</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
</div>
<div class="hero-img">
<img src="assets/image-1.jpg">
</div>
</div>
CSS
.container-hero {
display: flex;
justify-content: flex-start;
align-items: center;
overflow: hidden;
position: relative;
margin: 40px 0;
}
.hero-img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
.hero-img img {
width: 100%;
height: auto;
}
.hero-content {
background-color: #D64C31;
color: #FFFFFF;
align-self: flex-end;
width: 50%;
position: absolute;
bottom:0;
left:0;
padding: 40px 60px;
}
任何帮助将不胜感激!
喜欢吗?
<html>
<head>
<style>
.container {
background: #ccc;
width: 50%;
margin: 0 auto;
position: relative;
height: 700px;
}
.overflowing-element {
background: red;
width: 200px;
height: 200px;
position: absolute;
right: -200px;
top: 0;
}
</style>
</head>
<body>
<div class="container">
test
<div class="overflowing-element">
bla
</div>
</div>
</body>
</html>
仅使用该溢出元素的固定宽度,或使用JavaScript。
编辑:您刚刚编辑了图像,但现在我真的不知道您的意思了:D
我知道了,谢谢您的帮助!
我的父元素有一个overflow: hidden
,我禁用了它,并如下调整了子元素:
bottom: -40px
如果您有任何反馈意见,或者这被认为是不好的做法,请告诉我。我只是从这里开始:)
.container-hero {
display: flex;
justify-content: flex-start;
align-items: center;
/* overflow-x: hidden; */
position: relative;
margin: 40px 0;
}
.hero-img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
.hero-img img {
width: 100%;
height: auto;
}
.hero-content {
position:absolute;
background-color: #D64C31;
color: #FFFFFF;
width: 50%;
padding: 40px 60px;
bottom: -20px;
left:0;
}
</div>
<div class="container-hero">
<div class="hero-content">
<h1>Tech Challenge</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
</div>
<div class="hero-img">
<img src="https://source.unsplash.com/800x300">
</div>
</div>
您要查找的属性是CSS位置。
参考:CSS Position
.parent{
width:250px;
height: 20px;
background: yellow;
position:relative;
}
.child{
width:80px;
height: 100px;
background: purple;
position:absolute;
bottom: 0;
right:0;
}
<div class="parent">
<div class="child"></div>
</div>
使用CSS定位属性。
.container-hero {
position: relative; /* creates the container for absolutely positioned children */
}
.hero-content {
position: absolute;
bottom: -20px; /* use this offset to align vertically */
left: 20px; /* use this offset to align horizontally */
background-color: #D64C31;
color: #FFFFFF;
width: 225px;
padding: 40px 60px;
}
<div class="container-hero">
<div class="hero-content">
<h1>Tech Challenge</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
</div>
<div class="hero-img">
<img src="https://via.placeholder.com/500x250.png?text=hero image">
</div>
</div>