I have 2 divs 1 of parent
.box {
width: 960px;
position: relative;
}
#content {
width: 100%;
position: absolute;
background: yellow;
background: 0, 0, 0, 0.5;
padding: 30px 20%;
}
<div class="box">
<div id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore blanditiis veniam autem repellat consequatur hic magnam, molestiae debitis doloremque quam
</div>
</div>
When I am using the padding for content div it overflows it's parent. By the way I must use the width:100%; for #content because I want the padding in the content div because I'm using background color for it so, how can I fix it?
Here is the fiddle
Use box-sizing
*{box-sizing: border-box}
here is the Demo
*{box-sizing: border-box}
:root{
padding-top: 40px
}
.box{
width:480px;
position:relative;
}
#content{
width:100%;
position:absolute;
background:yellow;
background:0,0,0,0.5;
padding:30px 20%;
}
<div class="box">
<div id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore blanditiis veniam autem repellat consequatur hic magnam, molestiae debitis doloremque quam
</div>
</div>
you should use position:relative ...
Related
I'm flexing 2 elements, they overlap about 25%.
Using mix-blend-mode, it blends the backgrounds nicely, but also the text.
JS fiddle right here: https://jsfiddle.net/simohell/q9breg60/
I tried using ::before to apply the mix-blend mode but i can't figure it out.
.wrapper {
display: flex;
}
.text {
margin-top: 30px;
flex: 0 0 50%;
padding: 30px;
background-color: rgba(17, 38, 59, .95);
mix-blend-mode: multiply;
}
h1,
p {
color: #fff;
}
.image {
flex: 0 0 75%;
margin-left: -25%;
background: url("https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80");
background-size: cover;
mix-blend-mode: multiply;
}
<div class="wrapper">
<div class="text">
<h1>Welcome to this snippet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolore quaerat cupiditate accusantium eligendi vitae quas omnis obcaecati unde deserunt. Quibusdam aspernatur magni accusamus debitis distinctio iusto aliquam natus magnam?</p>
</div>
<div class="image"> </div>
</div>
Move the background of the text to main wrapper instead then increase its z-index to allow the image to blend only with the background. The main trick is to adjust the size of the gradient to simulate the same background for the text only:
.wrapper {
display: flex;
background:
linear-gradient(rgba(17, 38, 59, .95),rgba(17, 38, 59, .95))
bottom left/
50% /*widh:50% */
calc(100% - 30px) /*height:100% - top margin */
no-repeat;
}
.text {
margin-top: 30px;
flex: 0 0 50%;
padding: 30px;
z-index:2;
}
h1,p {
color: #fff;
}
.image {
flex: 0 0 75%;
margin-left: -25%;
background: url("https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80");
background-size: cover;
mix-blend-mode: multiply;
}
body {
margin:0;
}
* {
box-sizing:border-box;
}
<div class="wrapper">
<div class="text">
<h1>Welcome to this snippet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolore quaerat cupiditate accusantium eligendi vitae quas omnis obcaecati unde deserunt. Quibusdam aspernatur magni accusamus debitis distinctio iusto aliquam natus magnam?</p>
</div>
<div class="image"> </div>
</div>
You can also move the image to the background of the main wrapper and consider background-blend-mode. You will also have a reduced code:
.wrapper {
overflow:auto;
background:
url("https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80")
center/cover content-box,
linear-gradient(rgba(17, 38, 59, .95),rgba(17, 38, 59, .95))
bottom left/
50% /*widh:50% */
calc(100% - 30px) /*height:100% - top margin */
no-repeat;
padding-left:25%;
background-blend-mode: multiply;
}
.text {
margin-top: 30px;
width:66.6%; /* we added 25% of padding so we need 66.6% from 75% to get 50%*/
margin-left:-33.4%; /* we shift back by the added margin 25% (33.4% of 75%)*/
padding: 30px;
}
h1,p {
color: #fff;
}
body {
margin:0;
}
* {
box-sizing:border-box;
}
<div class="wrapper">
<div class="text">
<h1>Welcome to this snippet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolore quaerat cupiditate accusantium eligendi vitae quas omnis obcaecati unde deserunt. Quibusdam aspernatur magni accusamus debitis distinctio iusto aliquam natus magnam?</p>
</div>
</div>
I try to achieve effect similar to Photoshop multiply via code on my project. At the same time i try to exclude some elements that are in child div to be affected by it (like text layers) - and i hit in the wall. Tried already adding additional div's setting different z-index's or go with absolute position.
Here you can find pen with example of the problem:
HTML
<div class="main">
<div class="inner">
<h1>Some header</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia eligendi est eius unde autem dolore adipisci perspiciatis laboriosam reiciendis placeat! Eveniet, quam? Vitae sit saepe quam delectus fugiat, dolores necessitatibus.</p>
</div>
</div>
CSS
.inner {
text-align: center;
padding: 50px 0;
background: #0079ff;
mix-blend-mode: multiply;
backface-visibility: hidden;
color: white;
}
.main {
background-repeat: no-repeat;
background-image: url('https://preview.ibb.co/fMY2f9/Bg1.jpg');
background-size: cover;
}
Summary: Child element's of 'child div' are affected by multiply. Is there a way to prevent that?
Screenshots:
Use pseudo element for the background to avoid this:
.inner {
text-align: center;
padding: 50px 0;
color: white;
}
.main {
background-repeat: no-repeat;
background-image: url('https://preview.ibb.co/fMY2f9/Bg1.jpg');
background-size: cover;
position: relative;
z-index: 0;
}
.main::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #0079ff;
mix-blend-mode: multiply;
}
<div class="main">
<div class="inner">
<h1>Some header</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia eligendi est eius unde autem dolore adipisci perspiciatis laboriosam reiciendis placeat! Eveniet, quam? Vitae sit saepe quam delectus fugiat, dolores necessitatibus.</p>
</div>
</div>
I have a problem with a layout I'm trying to achieve with flexbox. I'd like to offset my columns a little more than the previous one to have a diagonal/stairs effect, but I'd also like them to keep the same height grown to the tallest one as flexbox automagically provides.
At first, I thought to myself: I just need to make them the same height with flexbox and then offset them with margins, but it seems that vertical margins are handled quite differently with flexbox as they push the upper side of the box, but not the whole box... this results in all my columns having their bottoms aligned, but that's not what I'd like to achieve.
Note : I know this can be achieved many other ways like relative positioning, adding padding on the parent, setting a min-height, with JavaScript and others, but I'd like to keep the document flow intact, keep ignoring the object's sizes and avoid using JS. I've also read that an upcoming flex-gap or item-gap would probably solve such issues in the future, but it's still an open issue / idea in the CSS Working Group draft.
Here's a text doodle for documentation's perennity.
Flex Expected
- -
| - | -
| | - | | -
| | | | | |
- - - - | |
- |
-
Here's a live demo of what I want to achieve and the current result with flexbox spec :
*{
box-sizing:border-box;
}
.wrap{
display:flex;
flex-direction: row;
width: 100%;
}
.box{
flex:0 0 33%;
padding:0 10px;
}
.box:nth-child(2){
margin-top: 60px;
}
.box:nth-child(3){
margin-top: 120px;
}
.box-inner{
height: 100%;
text-align:center;
background:#ccc;
border-radius:10px;
padding: 20px;
box-shadow:5px 5px 15px rgba(0,0,0,0.2);
}
.wrap2{
overflow:hidden;
}
.box2{
float:left;
width:33%;
padding: 0 10px;
}
.box2:nth-child(2){
margin-top: 60px;
}
.box2:nth-child(3){
margin-top: 120px;
}
.box-inner2{
min-height:300px;
text-align:center;
background:#ccc;
border-radius:10px;
padding: 20px;
box-shadow:5px 5px 15px rgba(0,0,0,0.2);
}
<h2>Flexbox</h2>
<div class="wrap">
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
</div>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
</div>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
</div>
</div>
<h2>Expected</h2>
<div class="wrap2">
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
</div>
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
</div>
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
</div>
</div>
Thanks!
Play with bottom margin. See below.
* {
box-sizing: border-box;
}
.wrap {
display: flex;
flex-direction: row;
width: 100%;
}
.box {
flex: 0 0 33%;
padding: 0 10px;
}
.box:nth-child(2) {
margin-top: 60px;
margin-bottom: -60px;
}
.box:nth-child(3) {
margin-top: 120px;
margin-bottom: -120px;
}
.box-inner {
height: 100%;
text-align: center;
background: #ccc;
border-radius: 10px;
padding: 20px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
.wrap2 {
overflow: hidden;
}
.box2 {
float: left;
width: 33%;
padding: 0 10px;
}
.box2:nth-child(2) {
margin-top: 60px;
}
.box2:nth-child(3) {
margin-top: 120px;
}
.box-inner2 {
min-height: 300px;
text-align: center;
background: #ccc;
border-radius: 10px;
padding: 20px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
<h2>Flexbox</h2>
<div class="wrap">
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
</div>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
</div>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
</div>
</div>
<h2>Expected</h2>
<div class="wrap2">
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
</div>
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
</div>
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
</div>
</div>
I'm building a layout for a clients custom cms system, all the content is built in bootstrap rows which gets printed in a container. The client wanted to be able to make colored rows, i managed this with pseudo elements like this:
.full-row:before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 100vw;
height: 100%;
background-color: inherit;
content: '';
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
I wanted to take the same approach to make the client able to make parallax rows as well, but I can't get the background image to fill the entire width of the row, or can't seem to position it the right way.
I have made a codepen to see an example where the colored rows work but the parallax effect sucks. Any suggestions on how to fix this?
Here's the code pen
One solution would be to use left: -9999px; right: -9999px; instead of width but by using this method image will stretch. the problem with you HTML structure is you used .row with in container and use position:relative; on it. If you take row out of container your current code will work fine
h3 {
text-transform: uppercase;
color: #fff;
}
header {
padding-top: 80px;
width: 100%;
height: 50vh;
color: #fff;
background-position: center;
background-image: url(http://i68.tinypic.com/2upfuk2.jpg);
background-size: cover;
}
header h1 {
text-transform: uppercase;
}
header .sub-headline {
font-size: 20px;
font-family: cursive;
}
.big-ass-icons {
text-align: center;
}
.big-ass-icons .fa {
font-size: 30px;
}
.big-ass-icons p {
display: block;
margin: 0 auto;
width: 80%;
}
.dummie-col {
height: 800px;
}
/* Helper classes */
.mar-b-30 {
margin-bottom: 30px;
}
.mar-b-40 {
margin-bottom: 40px;
}
.mar-b-50 {
margin-bottom: 50px;
}
.mar-b-60 {
margin-bottom: 60px;
}
.mar-b-70 {
margin-bottom: 70px;
}
.pad-30 {
padding: 30px 0;
}
.pad-40 {
padding: 40px 0;
}
.pad-50 {
padding: 50px 0;
}
.pad-60 {
padding: 60px 0;
}
.pad-70 {
padding: 70px 0;
}
.bg-gray {
background-color: #f9f9f3;
}
/* Row handeling */
.full-row,
.parallax-row {
position: relative;
}
.full-row:before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 100vw;
height: 100%;
background-color: inherit;
content: '';
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.parallax-row:before {
position: absolute;
top: 0;
bottom: 0;
left: -9999px;
right: -9999px;
display: block !important;
min-height: 100%;
background-color: rgba(0, 0, 0, .7);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
content: '';
}
/* More images to be added */
.image1:before {
background-image: url(http://i68.tinypic.com/2z5m1hh.png);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<header class="mar-b-50">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Big A** Image</h1>
<div class="sub-headline">How interesting</div>
</div>
</div>
</div>
</header>
<section class="container">
<div class="row big-ass-icons mar-b-40">
<div class="col-sm-4">
<span class="fa fa-pencil"></span>
<h4>Highly editable</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-sm-4">
<span class="fa fa-pencil"></span>
<h4>Highly editable</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-sm-4">
<span class="fa fa-pencil"></span>
<h4>Highly editable</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="row bg-gray full-row pad-40">
<div class="col-xs-12">
<h2>This is a colored row</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt at quos tenetur assumenda laudantium voluptatum laboriosam placeat rem earum, recusandae similique, et vero, doloremque possimus, fugit aliquam magni nulla! Sunt?</p>
</div>
</div>
<div class="row pad-30">
<div class="col-xs-12 text-center">
<h2>This is just a white row</h2>
<p>But it have two columns!</p>
</div>
<div class="col-sm-6">
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis illo sequi consectetur neque dignissimos animi eligendi, ab soluta laudantium minus autem non dolorem ut sint necessitatibus possimus sapiente pariatur voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod dolores perspiciatis doloribus voluptatem libero itaque, sapiente veniam error, autem, aliquid voluptatibus optio dolorum eaque eos quis facere voluptatum sed provident!</p>
</div>
<div class="col-sm-6">
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis illo sequi consectetur neque dignissimos animi eligendi, ab soluta laudantium minus autem non dolorem ut sint necessitatibus possimus sapiente pariatur voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod dolores perspiciatis doloribus voluptatem libero itaque, sapiente veniam error, autem, aliquid voluptatibus optio dolorum eaque eos quis facere voluptatum sed provident!</p>
</div>
</div>
<div class="row parallax-row image1 pad-70">
<div class="col-xs-12 text-center">
<h3>Wuhuuuu, awesome parallax!</h3>
</div>
</div>
<div class="row">
<div class="col-xs-12 dummie-col">
<h2>This is just to make the page long, for the parallax effect</h2>
</div>
</div>
</section>
Maybe a dick move, but im going to answer my own question.
The problem was the background-position units. I used vw to make the size so the positioning should be in the same units.
I added:
background-position: 50vw 0;
I also updated the pen
This question already has answers here:
Fixed position but relative to container
(31 answers)
Closed 4 years ago.
I am relatively new to CSS. I have run into a problem where I am trying to fix an element next to its parent element. I am able to do so with the following code:
Parent element:
#search_results{
position:relative;
}
Child element:
.total {
position: fixed;
top:10px;
width:250px;
left: 75%;
/*overflow: hidden;*/
margin-left: -125px;
}
This works fine until the browser window is resized. When that occurs, the fixed element overlaps its parent element. You can see my problem here:
Twittiment
I am trying to fix the child element to the top of the page and the right-hand side of the parent element. Any ideas?
Edit:
You can use position: sticky; which can be relative to the parent element.
body > div {
height: 300px;
background-color: #ddd;
overflow: auto;
margin-top: 70px;
}
div > div {
height: 1000px;
position: relative;
}
span {
display: block;
height: 20px;
background-color: tomato;
position: sticky;
top: 0;
}
<div>
<div>
<span>This is a relatively sticky header</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus voluptas pariatur ullam, dolores veritatis vero possimus nisi corrupti, provident aspernatur harum ab aliquam expedita assumenda, blanditiis aliquid id consequuntur distinctio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus voluptas pariatur ullam, dolores veritatis vero possimus nisi corrupti, provident aspernatur harum ab aliquam expedita assumenda, blanditiis aliquid id consequuntur distinctio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus voluptas pariatur ullam, dolores veritatis vero possimus nisi corrupti, provident aspernatur harum ab aliquam expedita assumenda, blanditiis aliquid id consequuntur distinctio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus voluptas pariatur ullam, dolores veritatis vero possimus nisi corrupti, provident aspernatur harum ab aliquam expedita assumenda, blanditiis aliquid id consequuntur distinctio.</p>
</div>
</div>
Old Answer:
As per CSS Spec, the element positioned fixed is fixed to the viewport and not the containing element.
So the short answer is NO, you cannot have a fixed position element relative to it's parent element. You can use position: absolute; instead and tweak the top left right bottom parameters on the run using jQuery/JS.
Of course you can, just need an extra div!
<div class="fixed-wrapper">
<div class="close-wrapper">
<div class="close"></div>
</div>
</div>
body
background: gray
height: 8000px
.fixed-wrapper
position: fixed
top: 20px
left: 0
right: 0
.close-wrapper
max-width: 1200px
position: relative
.close
background: #fff
width: 30px
height: 30px
position: absolute
right: 0
border: 1px solid #515151
&:before,&:after
width: 25px
height: 1px
background: #515151
content: ''
position: absolute
top: 50%
left: 50%
display: block
#include transform(translate(-50%, -50%) rotate(45deg))
&:after
transform: translate(-50%, -50%) rotate(-45deg)
See this fiddle I made for you :-)
http://codepen.io/marinagallardo/pen/mJyqaN
The best way to achieve this is to give parent element a transform css.
eg:
.relative{
transform: translateX(0); // this will act like relative parent
}
.fixed{
position: fixed;
left:0;
top:0;
width:100%; // width will be relative to the width of .relative
}
What you want to use is position:absolute . This places the child element according to it's parent element.
Some readings here : http://www.w3schools.com/cssref/pr_class_position.asp