Compare how my flexbox looks in chrome or firefox and how it looks in safari. Chrome & Firefox are correct.
In Safari, It's acting like the minimum height of the flex box is calculated based on the bottom position of the last flex item, whereas in other browsers it seems to calculate the minimum height of the flex box based upon any flex item which takes it over the minimum.
Can anybody find out if my code is wrong or confirm that this is a bug?
View snippet in full page to see.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.wrapper {
margin: 0 auto;
max-width: 984px;
}
.container {
margin: 0 80px;
padding: 30px 0;
}
h1 {
margin: 0;
}
.top {
position: relative;
display: flex;
flex-direction: column;
max-height: 800px;
flex-wrap: wrap;
}
.prod-header {
order: 3;
width: 49%;
padding-left: 30px;
}
.prod-header img {
width: 100%;
}
.my-slider {
order: 1;
width: 51%;
padding-right: 30px;
}
.my-slider img {
width: 100%;
}
.prod-info {
order: 4;
width: 49%;
padding-left: 30px;
}
.prod-video {
order: 2;
width: 51%;
padding-right: 30px;
}
.prod-video iframe {
width: 100%;
}
.prod-review {
position: absolute;
bottom: 0;
right: 0;
order: 5;
padding-left: 30px;
width: 49%;
}
.prod-review img {
width: 100%;
}
<div class="wrapper">
<div class="container">
<div class="top flex">
<header class="prod-header">
<h1><img src="http://placehold.it/608x300"></h1>
<p>Family trivia game</p>
</header>
<div class="my-slider">
<img src="http://placehold.it/608x675">
</div>
<div class="prod-info">
<p>Lorem ipsum Occaecat qui proident aute id voluptate velit nulla anim incididunt.</p>
<p>Lorem ipsum Velit sint dolore dolor irure ullamco eu. Lorem ipsum Aute irure velit ad in sunt Duis sint veniam minim in labore voluptate. Lorem ipsum Laborum dolore eiusmod Ut deserunt occaecat aliquip amet do esse quis tempor et.</p>
</div>
<div class="prod-video">
<div class="videoWrapper">
<iframe width="420" height="315" src="https://www.youtube.com/embed/KqtvA6xo4DE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="prod-review">
<img src="http://placehold.it/608x375">
<a class="button" href="#">Buy now</a>
</div>
</div>
</div>
</div>
It looks like this is indeed a Safari-specific Bug.
Related
hey i want to create responsive testimonials slider somthing like the image but without using swiperjs or anything. just pure html css javascript if anyone can help me please
I already create my code here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--first_color: #15241c;
--second-color: #09382f;
--third-color: #FF882E;
--fourth-color:#E55E2E;
--fifth-color:#F8F1E0;
--sixth-color : #EC9937;
}
.Testimonials {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
max-width: 100%;
margin: 40px 0px;
}
.Testimonials_title h2 {
font-size: 42px;
letter-spacing: -2px;
font-weight: 700;
letter-spacing: 0;
margin-bottom: 30px;
text-align: center;
color: var(--first_color);
}
.Testimonials_title>p {
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 40px;
font-weight: 300;
text-align: center;
}
.testimonials_container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
}
.testimonials_container_center {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.testimonials_content {
position: relative;
transition: all .3s ease-in-out;
transform: scale(0.9);
opacity: 0.9;
}
.testimonials_avatar {
position: absolute;
left: 50%;
top: -30px;
width: 90px;
height: 90px;
margin-left: -45px;
z-index: 1;
}
.testimonials_avatar img {
width: 90px;
height: 90px;
border-radius: 100%;
border: 6px solid #fff;
box-shadow: 0 9px 26px rgba(58, 87, 135, 0.1);
}
.testimonials_text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 75px 50px 75px;
overflow: hidden;
background: var(--third-color);
border: 1ps solid #f1f1f1;
border-radius: 10px;
transition: all .3s ease-in-out;
}
.testimonials_text_after {
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
color: var(--fifth-color);
opacity: .3;
font-size: 35px;
transition: all 400ms linear;
bottom: 25px;
right: 30px;
}
.testimonials_text_before {
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
color: var(--fifth-color);
opacity: .3;
font-size: 35px;
transition: all 400ms linear;
top: 25px;
left: 30px;
}
.testimonials_text p {
color: var(--second-color);
font-size: 14px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
line-height: 24px;
padding-bottom: 10px;
font-weight: 500;
}
.testimonials_information h3 {
font-weight: 600;
color: var(--second-color);
;
font-size: 18px;
}
.testimonials_information h4 {
font-weight: 400;
font-size: 12px;
padding-top: 6px;
color: var(--second-color);
;
}
.testimonials_container_center .active {
opacity: 1;
transform: scale(1.0);
width: 100%;
flex-grow: 6;
}
.testimonials_container_center .active .testimonials_text {
background: var(--fourth-color);
box-shadow: 0 9px 26px rgba(58, 87, 135, 0.1);
}
.listing-carousel-button {
position: relative;
width: 80px;
height: 50px;
z-index: 1;
cursor: pointer;
background: var(--second-color);
box-shadow: 0 9px 26px rgba(58, 87, 135, 0.45);
transition: all 200ms linear;
outline: none;
}
.listing-carousel-button.listing-carousel-button-next {
padding-right: 20px;
border-radius: 60px 0 0 60px;
}
.listing-carousel-button.listing-carousel-button-prev {
padding-left: 20px;
border-radius: 0 60px 60px 0;
}
.listing-carousel-button.listing-carousel-button-next:hover {
right: -15px;
background: rgba(6, 27, 65, 0.4);
}
.listing-carousel-button.listing-carousel-button-prev:hover {
left: -15px;
background: rgba(6, 27, 65, 0.4);
}
</style>
</head>
<body>
<section id="Testimonials">
<div class="Testimonials_top">
<div class="Testimonials_title">
<h2>Testimonials</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="Testimonials_bottom">
<div class="testimonials_container">
<div class="testimonials_container_left">
<div class="listing-carousel-button listing-carousel-button-prev"><i class="fa fa-caret-left"
style="color: #fff"></i></div>
</div>
<div class="testimonials_container_center">
<div class="testimonials_content">
<div class="testimonials_avatar">
<img src="61784903_2448694432083814_109523087682174976_n.jpg" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
<div class="testimonials_content active">
<div class="testimonials_avatar">
<img src="144937396_125411896111709_8005138515258577341_n.jpg" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
<div class="testimonials_content">
<div class="testimonials_avatar">
<img src="144739297_237956884645857_999009321808421704_n.jpg" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
</div>
<div class="testimonials_container_right">
<div class="listing-carousel-button listing-carousel-button-next"><i class="fa fa-caret-right"
style="color: #fff"></i></div>
</div>
</div>
</div>
</section>
</body>
</html>
if anyone can help please to create something like the image without using pure html css javascript and to add navigation bottom in the bottom
You can create a responsive testimonials slider using pure HTML, CSS, JavaScript.
Just Implement it according to your slider structure:
See a working example here: https://jsfiddle.net/Hamzailyas434/gcwxf1pt/6/
// Slider
const slider = function () {
const slides = document.querySelectorAll('.slide');
const btnLeft = document.querySelector('.slider__btn--left');
const btnRight = document.querySelector('.slider__btn--right');
const dotContainer = document.querySelector('.dots');
let curSlide = 0;
const maxSlide = slides.length;
// Functions
const createDots = function () {
slides.forEach(function (_, i) {
dotContainer.insertAdjacentHTML(
'beforeend',
`<button class="dots__dot" data-slide="${i}"></button>`
);
});
};
const activateDot = function (slide) {
document
.querySelectorAll('.dots__dot')
.forEach(dot => dot.classList.remove('dots__dot--active'));
document
.querySelector(`.dots__dot[data-slide="${slide}"]`)
.classList.add('dots__dot--active');
};
const goToSlide = function (slide) {
slides.forEach(
(s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)
);
};
// Next slide
const nextSlide = function () {
if (curSlide === maxSlide - 1) {
curSlide = 0;
} else {
curSlide++;
}
goToSlide(curSlide);
activateDot(curSlide);
};
const prevSlide = function () {
if (curSlide === 0) {
curSlide = maxSlide - 1;
} else {
curSlide--;
}
goToSlide(curSlide);
activateDot(curSlide);
};
const init = function () {
goToSlide(0);
createDots();
activateDot(0);
};
init();
// Event handlers
btnRight.addEventListener('click', nextSlide);
btnLeft.addEventListener('click', prevSlide);
document.addEventListener('keydown', function (e) {
if (e.key === 'ArrowLeft') prevSlide();
e.key === 'ArrowRight' && nextSlide();
});
dotContainer.addEventListener('click', function (e) {
if (e.target.classList.contains('dots__dot')) {
const { slide } = e.target.dataset;
goToSlide(slide);
activateDot(slide);
}
});
};
slider();
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
font-weight: 300;
color: #444;
line-height: 1.9;
background-color: #f3f3f3;
}
/* SLIDER */
.slider {
max-width: 100rem;
height: 50rem;
margin: 0 auto;
position: relative;
/* IN THE END */
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
width: 100%;
height: 50rem;
display: flex;
align-items: center;
justify-content: center;
/* THIS creates the animation! */
transition: transform 1s;
}
.slide > img {
/* Only for images that have different size than slide */
width: 100%;
height: 100%;
object-fit: cover;
}
.slider__btn {
position: absolute;
top: 50%;
z-index: 10;
border: none;
background: rgba(255, 255, 255, 0.7);
font-family: inherit;
color: #333;
border-radius: 50%;
height: 5.5rem;
width: 5.5rem;
font-size: 3.25rem;
cursor: pointer;
}
.slider__btn--left {
left: 6%;
transform: translate(-50%, -50%);
}
.slider__btn--right {
right: 6%;
transform: translate(50%, -50%);
}
.dots {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.dots__dot {
border: none;
background-color: #b9b9b9;
opacity: 0.7;
height: 1rem;
width: 1rem;
border-radius: 50%;
margin-right: 1.75rem;
cursor: pointer;
transition: all 0.5s;
/* Only necessary when overlying images */
/* box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.7); */
}
.dots__dot:last-child {
margin: 0;
}
.dots__dot--active {
/* background-color: #fff; */
background-color: #888;
opacity: 1;
}
/* TESTIMONIALS */
.testimonial {
width: 65%;
position: relative;
}
.testimonial::before {
content: '\201C';
position: absolute;
top: -5.7rem;
left: -6.8rem;
line-height: 1;
font-size: 20rem;
font-family: inherit;
color: var(--color-primary);
z-index: -1;
}
.testimonial__header {
font-size: 2.25rem;
font-weight: 500;
margin-bottom: 1.5rem;
}
.testimonial__text {
font-size: 1.7rem;
margin-bottom: 3.5rem;
color: #666;
}
.testimonial__author {
margin-left: 3rem;
font-style: normal;
display: grid;
grid-template-columns: 6.5rem 1fr;
column-gap: 2rem;
}
.testimonial__photo {
grid-row: 1 / span 2;
width: 6.5rem;
border-radius: 50%;
}
.testimonial__name {
font-size: 1.7rem;
font-weight: 500;
align-self: end;
margin: 0;
}
.testimonial__location {
font-size: 1.5rem;
}
.section__title--testimonials {
margin-bottom: 4rem;
}
<section class="section" id="section--3">
<div class="slider">
<div class="slide slide--1">
<div class="testimonial">
<h5 class="testimonial__header">Best financial decision ever!</h5>
<blockquote class="testimonial__text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Accusantium quas quisquam non? Quas voluptate nulla minima
deleniti optio ullam nesciunt, numquam corporis et asperiores
laboriosam sunt, praesentium suscipit blanditiis. Necessitatibus
id alias reiciendis, perferendis facere pariatur dolore veniam
autem esse non voluptatem saepe provident nihil molestiae.
</blockquote>
<address class="testimonial__author">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="" class="testimonial__photo" />
<h6 class="testimonial__name">Aarav Lynn</h6>
<p class="testimonial__location">San Francisco, USA</p>
</address>
</div>
</div>
<div class="slide slide--2">
<div class="testimonial">
<h5 class="testimonial__header">
The last step to becoming a complete minimalist
</h5>
<blockquote class="testimonial__text">
Quisquam itaque deserunt ullam, quia ea repellendus provident,
ducimus neque ipsam modi voluptatibus doloremque, corrupti
laborum. Incidunt numquam perferendis veritatis neque repellendus.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo
deserunt exercitationem deleniti.
</blockquote>
<address class="testimonial__author">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="" class="testimonial__photo" />
<h6 class="testimonial__name">Miyah Miles</h6>
<p class="testimonial__location">London, UK</p>
</address>
</div>
</div>
<div class="slide slide--3">
<div class="testimonial">
<h5 class="testimonial__header">
Finally free from old-school banks
</h5>
<blockquote class="testimonial__text">
Debitis, nihil sit minus suscipit magni aperiam vel tenetur
incidunt commodi architecto numquam omnis nulla autem,
necessitatibus blanditiis modi similique quidem. Odio aliquam
culpa dicta beatae quod maiores ipsa minus consequatur error sunt,
deleniti saepe aliquid quos inventore sequi. Necessitatibus id
alias reiciendis, perferendis facere.
</blockquote>
<address class="testimonial__author">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="" class="testimonial__photo" />
<h6 class="testimonial__name">Francisco Gomes</h6>
<p class="testimonial__location">Lisbon, Portugal</p>
</address>
</div>
</div>
<!-- <div class="slide"><img src="img/img-1.jpg" alt="Photo 1" /></div>
<div class="slide"><img src="img/img-2.jpg" alt="Photo 2" /></div>
<div class="slide"><img src="img/img-3.jpg" alt="Photo 3" /></div>
<div class="slide"><img src="img/img-4.jpg" alt="Photo 4" /></div> -->
<button class="slider__btn slider__btn--left">←</button>
<button class="slider__btn slider__btn--right">→</button>
<div class="dots"></div>
</div>
</section>
I'm using this footer as reference to my Website but I've detected a situation when the main content is short, which creates a gap between both elements (See image below).
Anyone can give me a hand in this? :) I'll post the necessary code!
#inherits LayoutComponentBase
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4 auth">
<LoginDisplay />
</div>
#Body
<!-- footer -->
https://codepen.io/scanfcode/pen/MEZPNd (HTML and CSS of Footer is here)
</div>
main CSS:
You may need to update your HTML structure in right panel.
follow
<div class="content">
<h1>Sticky Footer with Negative Margin 1</h1>
<div class="push">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
</div>
<footer class="footer">
Footer
</footer>
<style>
html, body {
height: 100%;
margin: 0;
}
.content {
padding: 20px;
min-height: 100%;
margin: 0 auto -50px;
}
.footer,
.push {
height: 50px;
}
* {
box-sizing: border-box;
}
body {
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 20px 0 0 0;
}
footer {
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
</style>
I am trying to get a row with equal height columns regardless of content with the link at the bottom with all columns. Here is a JS BIN and code is below.
<div class="container">
<h4 class="report_list__title">Activites</h4>
<div class="row report_list">
<div class="col-xs-3 report_list__item">
Activity 1
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
View
</div>
<div class="col-xs-3 report_list__item">
Activity 2
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
View
</div>
<div class="col-xs-3 report_list__item">
Activity 3
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
View
</div>
<div class="col-xs-3 report_list__item">
Activity 4
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
View
</div>
</div>
<h4 class="report_list__title">Marketing</h4>
<div class="row report_list report_list--last">
<div class="col-xs-3 report_list__item">
Marketing 1
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
View
</div>
</div>
</div>
.report_list {
display: flex;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
.report_list--last {
border: none;
}
.report_list__title {
margin-top: 20px;
}
.report_list__item {
border: 1px solid green;
display: inline-flex;
flex-direction: column;
}
.report_list .report_list__item a {
align-items: flex-end;
}
If you use margin-top: auto; instead for the last anchor it will be positioned at the bottom.
Stack snippet
.report_list {
display: flex;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
.report_list--last {
border: none;
}
.report_list__title {
margin-top: 20px;
}
.report_list__item {
border: 1px solid green;
display: inline-flex;
flex-direction: column;
}
.report_list .report_list__item a:last-child {
margin-top: auto; /* push to bottom */
align-self: center; /* hor. center */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<h4 class="report_list__title">Activites</h4>
<div class="row report_list">
<div class="report_list__item">
Activity 1
<p>List and filter all sales property viewings.</p>
View
</div>
<div class="report_list__item">
Activity 2
<p>List and filter all sales property valuations.</p>
<p>List and filter all sales property valuations.</p>
View
</div>
<div class="report_list__item">
Activity 3
<p>List and filter all sales properties with missing EPCs.</p>
View
</div>
<div class="report_list__item">
Activity 4
<p>List and filter all sales property offers.</p>
View
</div>
</div>
<h4 class="report_list__title">Marketing</h4>
<div class="row report_list report_list--last">
<div class="col-xs-3 report_list__item">
Marketing 1
<p>List and filter all sales property viewings.</p>
View
</div>
</div>
I think if you add this to the .report_list__item it might work:
justify-content: space-between;
flex:0 0 200px;
This article is pretty good too for Flexbox layout examples:
https://medium.com/coderbyte/a-guide-to-becoming-a-full-stack-developer-in-2017-5c3c08a1600c
I'm looking for a VueJS Card Component that mimic's this Example:
http://jsfiddle.net/NuWna/2/
Having a hard time writing the jQuery code in VueJS
$(document).ready(function(){
$(".slide").hover(function(){
$(this).find("div.snipit").slideDown("slow");
},function(){
$(this).find("div.snipit").slideUp("slow");
});
});
You can create a Vue component and you can use jQuery slideUp/slideDown methods on mounted vue lifecycle hooks,
Also I've given solution without jQuery below.
1. Using Vue + jQuery - http://jsfiddle.net/79rc5oss/1/
Vue.component('my-comp', {
template: `
<div class="slide">
<img src="http://dummyimage.com/250x200" alt="1" width="250" height="200" />
<div class="snipit">
<h4>Image 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
`,
mounted: function(){
$(".slide").hover(function(){
$(this).find("div.snipit").slideDown("slow");
},function(){
$(this).find("div.snipit").slideUp("slow");
});
}
})
var app = new Vue({
el: '#app'
});
img{
border:1px solid yellow;
margin: 14px 0 0 0;
}
div.slide {
width: 310px;
height: 230px;
float: left;
border:1px solid red;
text-align: center;
position: relative;
background: url(http://dummyimage.com/310x230) no-repeat top center;
}
div.slide div {
width: 250px;
height: 100px;
padding: 0;
display: none;
position: absolute;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
border:1px solid red;
bottom: 14px;
left:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
<my-comp></my-comp>
</div>
2. Using Vue + CSS without jQuery - http://jsfiddle.net/79rc5oss/
Vue.component('my-comp', {
template: `
<div class="slide">
<img src="http://dummyimage.com/250x200" alt="1" width="250" height="200" />
<div class="snipit">
<h4>Image 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
`
})
var app = new Vue({
el: '#app'
});
img{
border:1px solid yellow;
margin: 14px 0 0 0;
}
div.slide {
width: 310px;
height: 230px;
float: left;
border:1px solid red;
text-align: center;
position: relative;
background: url(http://dummyimage.com/310x230) no-repeat top center;
overflow: hidden;
}
.slide div.snipit{
width: 250px;
height: 0px;
padding: 0;
display: block;
position: absolute;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
border:1px solid red;
bottom: 12px;
left:30px;
overflow: hidden;
transition: all .5s ease-out;
}
.slide:hover div.snipit{
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
<my-comp></my-comp>
</div>
I am having trouble with z-index at the moment. Using some of the answers above has progressed the issue but has not solved it yet.
My Over div has a relative position and z-index of 99999 My under div has a fixed position and z-index of 0.
I tried what was mentioned in this thread and changed my under div to a relative position, however while this hides the div intially, when I click a button to slide the Over div to the right to reveal the under div, it is not there, it is at the bottom of the page under the footer.
I am copying an example put online, and in the sample online it works with the relative and fixed positions. Its the FB style menu. Slide your content to the right to reveal your menu. i believe thats why its fixed, rather than relative.
I was hoping someone could advise why this works in the example as everyone above noted that z-index works within a context.
Online Example http://media02.hongkiat.com/mobile-navi-with-jquery/demo/index.html
EDIT: Adding sample code.
HTML Markup:
<div id="w">
<div id="pagebody">
<header id="toolbarnav">
<h1>HK Mobile</h1>
</header>
<section id="content" class="clearfix">
<h2>Welcome to the Mobile Site!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem sapien, auctor placerat varius sed, aliquam et nibh. Quisque posuere erat nec tortor vestibulum id dignissim quam ornare. Suspendisse sapien ante, pellentesque non interdum ac, feugiat at eros. Morbi lacus augue, blandit ac porta a, rutrum quis tellus. Nam ut velit lorem, sit amet placerat lorem.</p>
<img src="img/hongkiat-lim.png" alt="Hongkiat Lim" class="photo">
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam convallis lacinia dapibus. Sed nunc enim, ultrices nec suscipit ac, malesuada pharetra diam. Etiam massa orci, pellentesque nec lacinia eu, vulputate non est. Donec faucibus, tellus eu ultrices lobortis, leo nisl iaculis elit, id dictum arcu massa in nibh. Nulla auctor vehicula rutrum. Vivamus mi mauris, molestie sit amet placerat ac, tempor vitae nisi. Fusce pharetra eleifend aliquam. Cras ultricies orci sit amet ligula tempor pulvinar.</p>
<p>Vivamus consectetur nulla vel neque accumsan bibendum lacinia nibh venenatis. Morbi placerat tempor nunc, eu congue metus pellentesque vitae.</p>
<p>Maecenas lacinia commodo venenatis. Sed nec mauris sapien. Donec eget justo sapien, id elementum magna. Integer et orci quis urna tempus eleifend eget eu nulla. Quisque interdum porttitor tincidunt. Nulla ornare dolor elit, eu adipiscing felis. Nulla viverra blandit bibendum. Mauris non tellus lacus.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam convallis lacinia dapibus. Sed nunc enim, ultrices nec suscipit ac, malesuada pharetra diam. Etiam massa orci, pellentesque nec lacinia eu, vulputate non est. Donec faucibus, tellus eu ultrices lobortis, leo nisl iaculis elit, id dictum arcu massa in nibh.</p>
<p>Nulla auctor vehicula rutrum. Vivamus mi mauris, molestie sit amet placerat ac, tempor vitae nisi. Fusce pharetra eleifend aliquam. Cras ultricies orci sit amet ligula tempor pulvinar. Vivamus consectetur nulla vel neque accumsan bibendum lacinia nibh venenatis. Morbi placerat tempor nunc, eu congue metus pellentesque vitae.</p>
<p>Maecenas lacinia commodo venenatis. Sed nec mauris sapien. Donec eget justo sapien, id elementum magna. Integer et orci quis urna tempus eleifend eget eu nulla. Quisque interdum porttitor tincidunt. Nulla ornare dolor elit, eu adipiscing felis. Nulla viverra blandit bibendum. Mauris non tellus lacus.</p>
<p><center><img src="img/pencilman.jpg" alt="pencilmannn"></center></p>
</section>
</div>
<div id="navmenu">
<header>
<h1>Menu Links</h1>
</header>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Advertise</li>
<li>Write for Us</li>
<li>Contacts</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
CSS:
body { background: #181c1f; font-family: "Trebuchet MS", Arial, Tahoma, sans-serif; font-size: 62.5%; line-height: 1; }
a { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; }
img { border: 0; }
img.photo { padding: 2px; background: #888; border: 1px solid #cecece; border-bottom-color: #aaa; border-right-color: #aaa; float: right; margin-left: 20px; margin-right: 11px; }
ul,ol,h1,h2,h3,h4,h5,h6,p { display: block; }
#w { position: relative; overflow-x: hidden; overflow-y: hidden; }
/** #group core body **/
#w #pagebody { position: relative; left: 0; max-width: 640px; min-width: 320px; z-index: 99999; }
#w #navmenu { background: #475566; height: 100%; display: block; position: fixed; width: 300px; left: 0px; top: 0px; z-index: 0; }
/** #group header **/
#w #pagebody header#toolbarnav { display: block; position: fixed; left: 0px; top: 0px; z-index: 9999; background: #0b1851 url('img/tabbar-solid-bg.png') top left no-repeat; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; height: 44px; width: 100%; max-width: 640px; }
#w #pagebody header#toolbarnav h1 { text-align: center; padding-top: 10px; padding-right: 40px; color: #e6e8f2; font-weight: bold; font-size: 2.1em; text-shadow: 1px 1px 0px #313131; }
#w #pagebody header #menu-btn { display: block; float: left; width: 53px; height: 30px; background: url('img/nav-btn.png') no-repeat; margin-top: 6px; margin-left: 8px;}
#w #pagebody #content { display: block; background: #fff; padding: 5px 12px; margin-top: 40px; min-height: 550px; height: 100%; z-index: 9999; }
#w #pagebody #content h2 { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; color: #181818;
font-family: "Droid Serif", Georgia, serif; font-size: 2.6em; line-height: 1.8em; font-weight: 500; margin-top: 25px; margin-bottom: 25px; padding: 12px 0; text-align: center; }
#w #pagebody #content h3 { font-family: "Calibri", Verdana, Arial, sans-serif; font-weight: 700; font-size: 1.8em; line-height: 1.75em; text-transform: capitalize; margin-bottom: 5px; color: #222; }
#w #pagebody #content p { font-size: 1.4em; line-height: 1.6em; margin-bottom: 15px; color: #444; }
#w #pagebody #content a { color: #78a5ce; }
#w #pagebody #content a:hover { color: #678eb2; }
/** #group nav menu **/
#w #navmenu header { display: block; background: #303a44; height: 44px; }
#w #navmenu header h1 { text-align: center; padding-top: 10px; color: #e6e8f2; font-weight: bold; font-size: 2.1em; text-shadow: 1px 1px 0px #313131; }
#w #navmenu ul { list-style: none; background: #475566; height: 100%; }
#w #navmenu ul li { display: block; }
#w #navmenu ul li a { position: relative; display: block; border-bottom: 1px solid #303c4a; padding: 14px 11px; font-weight: bold; color: #f0f0f0; text-shadow: -1px -1px 1px #222; font-size: 1.6em; text-decoration: none; }
#w #navmenu ul li a:hover { color: #cad0e6; text-decoration: none; }
#w #navmenu ul li a::after {
content: '';
display: block;
width: 6px;
height: 6px;
border-right: 3px solid #d0d0d8;
border-top: 3px solid #d0d0d8;
position: absolute;
right: 30px;
top: 45%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#w #navmenu ul li a:hover::after { border-color: #cad0e6; }
/** #group misc **/
.blue { color: #1c609f !important; font-weight: bold; }
/** #group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
My code is not the exact same but its similar. I just want to understand why z-index works in this example with 2 different positions set, relative and fixed, as that is what I need to achieve.