I want the green element to be under the text box and also under image.
I tried to set the z-index for each element, but nothing has changed.
Can I reach this through the z-index property?
I can't change html. And I also want the pseudo-element to be a child of the text block for the adaptive height
.item {
display: flex;
align-items: flex-start;
width: 400px;
height: 250px;
}
.col1 {
margin-right: 20px;
}
.col2 {
position: relative;
z-index: 1;
width: 200px;
height: auto;
padding: 5px;
background-color: gray;
}
.col2::before {
content: "";
position: absolute;
bottom: -20px;
left: -60px;
width: 150px;
min-height: 100px;
height: 100%;
z-index: -1;
background-color: seagreen;
}
.image {
position: relative;
z-index: 2;
width: 200px;
height: 150px;
}
<div class="item">
<div class="col1">
<img class="image" src="http://satyr.io/200x150/1" />
</div>
<div class="col2">
<p class="title">Lorem ipsum dolor</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima esse ipsam error repudiandae ut amet.</p>
</div>
</div>
Remove z-index: 1 from class .col2. So, the green block will appear under the image as well as the text box.
You could place an element inside <div class="col2"> because the pseudo element cannot have a lower z-index that the element itself. And then place an div inside of <div class="col2"> which you could apply the z-index and the gray background on.
Related
Mockup:
The parent div's height is dynamic; it shrinks to fit the left-hand div (the one containing the text). I'd like the right-hand div (white background, with child img) to stretch vertically to fill the parent div. Unfortunately, height: 100% only works when the parent div's height is statically determined.
Here's what I've got right now:
.container {
background-color: lightgray
}
.blurb {
display: inline-block;
padding: 2em;
}
.decoration {
float: right;
background-color: white;
position: relative;
left: -10px;
height: 100% // XXX does not work
}
<div class="container">
<div class="blurb">
Lorem ipsum...
</div>
<div class="decoration">
✓
</div>
</div>
Answers to similar questions recommend using display: table-cell;, but then you have the issue of making the first (text) div stretch horizontally all the way, which is a different can of worms entirely.
Flexbox can do that.
.container {
background-color: lightgray;
display: flex;
border: 1px solid red;
width: 80%;
margin: 1em auto;
}
.blurb {
flex: 1;
padding: 2em;
}
.decoration {
display: flex;
align-items: center;
background-color: white;
margin-right: 1em;
}
<div class="container">
<div class="blurb">
Lorem ipsum...
</div>
<div class="decoration">
✓
</div>
</div>
<div class="container">
<div class="blurb">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae accusantium, magni commodi repellendus quidem facilis doloremque perspiciatis, ab odio omnis deleniti, obcaecati maiores dolores?
</div>
<div class="decoration">
✓
</div>
</div>
You can achieve it with position property. The parent container set to relative and child decoration set to absolute with top and bottom set to 0.
.container {
background-color: lightgray;
position: relative;
}
.blurb {
display: inline-block;
padding: 2em;
}
.decoration {
float: right;
background-color: white;
position: absolute;
top: 0;
bottom: 0;
right: 10px;
/* Align the content to center */
display:flex;
justify-content:center;
align-items:center;
text-align: center;
}
<div class="container">
<div class="blurb">
Lorem ipsum...
</div>
<div class="decoration">
✓
</div>
</div>
I have a difference of box sizing interpretation between webkit and Firefox using height 100% on a parent.
HTML:
<header>
Lorem ipsum dolor amet
</header>
<div class="wrapper">
<div class="content">
My background depends on my ancestor sibling
</div>
</div>
<div class="red">
<p class="white">
Amet ipsum dolor
</p>
</div>
CSS:
header {
height: 150px;
background: #fff;
}
.red {
background: red;
padding: 6em 0;
}
.content {
background: rgba(28,28,28, .3);
margin-bottom: -100%;
}
.wrapper {
position: relative;
height: 100%;
}
p.white {
background: #fff;
width: 70%;
margin: 0 auto;
}
JS fiddle here https://jsfiddle.net/m1fobvwv/
Result on Chrome (expected):
Wrong result on FF:
A colleague of mine found a workaround:
Add position: absolute; width: 100%; to .content
Updated fiddle https://jsfiddle.net/m1fobvwv/3/
I have a block of code that is solid. Works fine. Except for the footer of my site. No idea why but the heading bars are not showing for the footer but they are everywhere else?
here is a pen of the working code
http://codepen.io/VincentStephens/pen/EjyJKP
Here is a screenshot of the not working site:
https://www.dropbox.com/s/y3oxrvzvdvyaai6/Screen%20Shot%202015-05-19%20at%2019.07.47.png?dl=0
This works by creating a :before element. Putting the menu text into a span, then using z-index to position the span on top of the :before.
You can see the element there (see photo), everything is the same but just won't show unless I change the z-index to 0 or higher but then the line is above the heading text in the span???
h1.heading {
color: $light-gold;
text-transform: uppercase;
font-size: 32px;
font-weight: 300;
line-height: 40px;
font-family: SourceSansPro;
span {
background-color: $golden-black;
display: inline-block;
z-index: 1;
padding-right: 10px;
}
}
h1.heading:before {
content: "";
background-color: $light-gold;
display: block;
position: relative;
top: 23px;
width: 100%;
height: 6px;
z-index: -1;
}
HTML - working
<h1 class="heading"><span>The Team</span></h1>
HTML - Footer, not working
<div class="fluid-container footer">
<footer class="container">
<div class="col-lg-4">
<h1 class="heading"><span>About</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bestiarum vero nullum iudicium puto. Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis; De illis, cum volemus. Duo Reges: constructio interrete. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere.</p>
</div>
<div class="col-lg-4">
<h1 class="heading"><span>Address</span></h1>
<p class="address">
address<br>
</p>
<p class="address">
Tell: 0207 374 6141 <br>
Email: enquiries#company.com
</p>
</div>
<div class="col-lg-4">
<h1 class="heading"><span>Connect</span></h1>
<img src="img/social-media.png" width="186" height="46">
<h1>Payment Options</h1>
<img src="img/payment-cards.png" width="267" height="56">
</div>
</footer>
</div>
Thanks for the moment on sanity.... it was indeed a position issue.
The footer also has a background colour. so that entire element needed to have a position: relative; and z-index: -1; added to it.
full code for anyone else in same situation:
SCSS - wil need compiling
.fluid-container.footer {
position: relative;
z-index: -1;
background-color: $light-golden-black;
footer {
h1.heading {
color: $light-gold;
text-transform: uppercase;
font-size: 32px;
font-weight: 300;
line-height: 40px;
font-family: SourceSansPro;
position: relative;
span {
background-color: $light-golden-black;
display: inline-block;
z-index: 1;
padding-right: 10px;
position: relative;
}
}
h1.heading:before {
content: "";
background-color: $light-gold;
display: block;
position: absolute;
top: 23px;
width: 100%;
height: 6px;
z-index: -1;
}
}
}
I know this is a noob question, but I just can't figure this out! I'm laying out a page for our intranet and all I need to do is position some divs side by side. Each container is a different item, but all containers have the same structure, a header, some descriptive text, and an image. I will be adding items as they are given to me. This is basically just a page i'm creating for employees to sell items. Here is my css and an image of what I'm trying to achieve. Please let me know if this doesn't make sense, but as smart as you guys have proven to be in the past, i'm sure you get the idea.
.wrapper {
width: 1260px;
height: 900px;
margin: 0px auto;
position: relative;
}
.container {
width: 400px;
height: 400px;
margin: 10px;
position: absolute;
}
.itemText {
width: 350px;
height: 190px;
padding: 0px;
position: absolute;
top: 25px;
left: 25px;
}
.itemHead {
padding: 0px;
margin: 0px;
}
.itemDesc {
padding: 10px;
margin: 0px;
}
.itemThumb {
width: 350px;
height: 150px;
position: absolute;
bottom: 25px;
left: 25px;
}
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/text.css">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="itemText">
<div class="itemHead">
<p>Lorem ipsum.</p>
</div>
<div class="itemDesc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
</div>
</div>
<div class="itemThumb"></div>
</div>
<div class="container">
<div class="itemText">
<div class="itemHead">
<p>Lorem ipsum.</p>
</div>
<div class="itemDesc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
</div>
</div>
<div class="itemThumb"></div>
</div>
<div class="container">
<div class="itemText">
<div class="itemHead">
<p>Lorem ipsum.</p>
</div>
<div class="itemDesc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
</div>
</div>
<div class="itemThumb"></div>
</div>
</div>
</body>
</html>
Don't position your containers absolutely.
.container {
width: 400px;
height: 400px;
margin: 10px;
position: relative;
float:left;
}
At the end of the last container div, you'll need a div to clear: left;
<div style="clear:left;"></div>
Now when you add more div's, they will auto float, and the container will get cleared.
Absolute positioning is in that case really useless.
try this:
.container {
position: relative;
float: left;
width: 400px;
height: 400px;
margin: 10px;
}
Your divs have the same height, so using float is pretty convenient. By giving your .container the attribute position: relative .itemThumb is positioned correctly.
This should work
I don't know if I understand exactly
but one way to get the containers to line up is to set the .container class to
.container {
width: 30%;
height: 400px;
margin: 10px;
display: inline-block;
}
Adding the display: inline-block;
And removing the position:absolute.
Setting your width for each container to around 30% of the wrapper will ensure that three containers get lined up before they go to a new line.
You will need to take off all the position: settings IN your css file so that all the information stays contained within the div.
e.g.
.wrapper {
width: 1260px;
height: 900px;
margin: 0px auto;
position: relative;
}
.container {
width: 30%;
height: 400px;
margin: 10px;
display: inline-block;
border: 1px solid black;
}
.itemText {
width: 350px;
height: 190px;
padding: 0px;
top: 25px;
left: 25px;
}
.itemHead {
padding: 0px;
margin: 0px;
}
.itemDesc {
padding: 10px;
margin: 0px;
}
.itemThumb {
width: 350px;
height: 150px;
bottom: 25px;
left: 25px;
}
I want to align my button at the bottom right corner of my div. How can I do that?
Current css of div:
float: right;
width: 83%;
margin-right: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height:625px;
overflow:auto;
You can use position:absolute; to absolutely position an element within a parent div.
When using position:absolute; the element will be positioned absolutely from the first positioned parent div, if it can't find one it will position absolutely from the window so you will need to make sure the content div is positioned.
To make the content div positioned, all position values that aren't static will work, but relative is the easiest since it doesn't change the divs positioning by itself.
So add position:relative; to the content div, remove the float from the button and add the following css to the button:
position: absolute;
right: 0;
bottom: 0;
CSS3 flexbox can also be used to align button at the bottom of parent element.
Required HTML:
<div class="container">
<div class="btn-holder">
<button type="button">Click</button>
</div>
</div>
Necessary CSS:
.container {
justify-content: space-between;
flex-direction: column;
height: 100vh;
display: flex;
}
.container .btn-holder {
justify-content: flex-end;
display: flex;
}
Screenshot:
Useful Resources:
Specs
MDN
CSS Tricks
* {box-sizing: border-box;}
body {
background: linear-gradient(orange, yellow);
font: 14px/18px Arial, sans-serif;
margin: 0;
}
.container {
justify-content: space-between;
flex-direction: column;
height: 100vh;
display: flex;
padding: 10px;
}
.container .btn-holder {
justify-content: flex-end;
display: flex;
}
.container .btn-holder button {
padding: 10px 25px;
background: blue;
font-size: 16px;
border: none;
color: #fff;
}
<div class="container">
<p>Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... </p>
<div class="btn-holder">
<button type="button">Click</button>
</div>
</div>
Parent container has to have this:
position: relative;
Button itself has to have this:
position: relative;
bottom: 20px;
right: 20px;
or whatever you like
I have solved this using position fixed:
.button-corner {
position: fixed;
bottom: 20px;
right: 20px;
}
Goes to the right and can be used the same way for the left
.yourComponent
{
float: right;
bottom: 0;
}