css-position

How can I get overlapping divs with relative positions?

由 最后都变了- 提交于 2020-06-22 06:55:09
问题 I want a few divs to be positioned in a line next to each other, but also allow them to overlap the previous div. What I'm trying to get is a timeline with divs for events of certain length. The events can overlap each other. My idea was to give each div the same top position, an increasing z-index and an increasing left position (according to the time of the event). Later I would pop individual divs out by mouse-over events to visualise the overlap. What I do is to make it so each div gets

How do I achieve negative padding in CSS?

由 北战南征 提交于 2020-06-08 07:17:25
问题 I am looking for a way to effectively achieve negative padding in CSS. The Problem I have an h1 element on my web page that currently has the following code associated with it: h1 { background-color: #375E97; color: #FFFFFF; font-size: 50px; font-family: 'Righteous', cursive; text-transform: uppercase; text-align: center; padding: 0; margin: 0 auto; height: 49px; } <head> <link href="https://fonts.googleapis.com/css?family=Righteous|Roboto:400,700,400i" rel="stylesheet"> </head> <body> <h1

CSS - Position:Fixed navigation bar not working in Safari (OS X or iOS)

由 孤街浪徒 提交于 2020-06-02 11:09:59
问题 Here is the site in question. If you view the page in Chrome, everything works as expected (scroll past the landing and the nav bar comes into view). However, it stays above everything in Safari, in both OS X and iOS. You can pull the page down and see the nav bar up there. I rarely view the site on mobile or Safari, but I do know that this worked in the past and that no changes to the CSS have been made on our end. That said, I'm wondering if it was a Safari change that caused this. One last

CSS - Position:Fixed navigation bar not working in Safari (OS X or iOS)

由 淺唱寂寞╮ 提交于 2020-06-02 11:09:12
问题 Here is the site in question. If you view the page in Chrome, everything works as expected (scroll past the landing and the nav bar comes into view). However, it stays above everything in Safari, in both OS X and iOS. You can pull the page down and see the nav bar up there. I rarely view the site on mobile or Safari, but I do know that this worked in the past and that no changes to the CSS have been made on our end. That said, I'm wondering if it was a Safari change that caused this. One last

CSS position Sticky and Z-Index overlay/modal

由 懵懂的女人 提交于 2020-05-29 05:36:11
问题 i have a problem with the position: sticky and z-index I want my modal in the sticky-element to be overlayed by the overlay. With position: relative it works: the modal is before the overlay. But when I use Sticky the modal is behind the overlay. Hope it's understandable what I mean. Here's the example: .sticky { position: sticky; /* <-- dosen't work */ /* position: relative; /* <-- work */ top: 0; width: 100%; height: 200vh; background: red; } .modal { z-index: 1000; position: fixed; margin:

CSS position Sticky and Z-Index overlay/modal

由 让人想犯罪 __ 提交于 2020-05-29 05:36:06
问题 i have a problem with the position: sticky and z-index I want my modal in the sticky-element to be overlayed by the overlay. With position: relative it works: the modal is before the overlay. But when I use Sticky the modal is behind the overlay. Hope it's understandable what I mean. Here's the example: .sticky { position: sticky; /* <-- dosen't work */ /* position: relative; /* <-- work */ top: 0; width: 100%; height: 200vh; background: red; } .modal { z-index: 1000; position: fixed; margin:

Fixed position element inside div container only

由 南笙酒味 提交于 2020-04-11 04:37:26
问题 I have a fixed block element inside a container. On scrolling the fixed positioned element is going beyond the container. I understood fixed element will be positioned according to window vw. But is there any way to make sure fixed positioned element will get scrolled only upto container position. The fixed position element should not go beyond the container The problem can be seen in the following. https://codepen.io/anon/pen/dKLByX I tried to fix the problem using the following: if($(window

Fixed position element inside div container only

由 血红的双手。 提交于 2020-04-11 04:36:47
问题 I have a fixed block element inside a container. On scrolling the fixed positioned element is going beyond the container. I understood fixed element will be positioned according to window vw. But is there any way to make sure fixed positioned element will get scrolled only upto container position. The fixed position element should not go beyond the container The problem can be seen in the following. https://codepen.io/anon/pen/dKLByX I tried to fix the problem using the following: if($(window

CSS (webkit): overriding top with bottom on absolute-positioned element

由 ≡放荡痞女 提交于 2020-04-05 07:30:13
问题 I'm having a problem with overriding some plugin CSS. Editing that CSS directly is not really an option, as it would make updating the plugin more risky. The problem: an element has absolute positioning, and has top:0px in the original. I want to override it by bottom:0px. For the sake of example .element {position:absolute; top:0;} /* in another file */ .my .element {bottom:0;} On firefox this works ok (bottom:0 is the applied style), but safari/chrome don't seem to be get over the top:0. I

Why magin:auto is not enough to center position absolute or fixed?

由 喜夏-厌秋 提交于 2020-04-03 10:40:06
问题 I am trying to center the contents of a div, my parent container is set to Relative. I am using this on the inner div position: absolute; margin: auto; width: 70px; height: 70px; but it refuses to center, i had to add a left and right of 0, but i don't understand why i.e. position: absolute; right: 0; left: 0; margin: auto; width: 70px; height: 70px; I thought to center only requires a width, which is has. I am a little confused at why setting the right / left to 0 - seems to work. Also if
订阅 css-position