Is it possible to set the z-index of the padding of a specific div?
I'm using particle.js as an interactive background that changes with mouse position. However, this only works when the canvas is at the top of the stack. I am using a div container for the main content with a padding of 10%.
I'd like this padding to be sent backwards on the stack so that the mouse can interact with the background.
So I managed to solve this by removing the padding and margins of the div and using relative position with the same spacings as the margin previously. I then set the canvas z-index to 1 with the container div z-index to 2.
Related
I have created a div resizable from two directions ie. East and West and facing following
Issues:
while stretching div component from left, the position of component is changing ie. reaching to top side of the specified container.
2.while stretching div component from right,i am able to stretch it to half of the specified container only but not the full container.
3.while repositioning the stretched div,the size of top and width are increasing inversely proportionally.
Requirement:
I want div component to resize from left and right in the same row with no increase in height or top.
Please suggest something!!
I'm having some troubles with keyframe animation using CSS3. The position of the image being animated changes based on the window/screen size. I've tried to find a solution to this problem but I'm lost. I tried to specify a boundary so the animation only plays inside that, but it did not work.
See here, and try resizing the window. I know this has something to do with the position:absolute. My ultimate goal was to have the space background move left to right but still be dead in center if that makes sense.
Thanks for your help.
The problem is that the margin-left and margin-right properties are being set to auto, which adjusts the left margin of tdr-main, while space-bg's animation modifies the absolute left position. When the window is resized to a smaller size, the left-margin on tdr-main shrinks down to 45px, but the left position on the background image still moves betweens an absolute 342px and 450px.
If you embed space-bg inside the same container that has the auto margins on it,
<div id="tdr-main">
<div id="space-bg">
</div>
[...]
</div>
then both will stay centered, and the position on space-bg will be relative to the centered container div. Just use z-index with absolute or relative positioning to keep things stacked correctly.
I'm starting a new project and i wanna use normalize.css but i'm facing one little problem with. In the top of the DOM you'll find a yellow gap, body background-color.
The main container is green colored and contains exactly the html from normalize.css demo.
You'll find a demo right here: http://goo.gl/hf8cv
What you see is margin collapsing.
When an element with a margin is inside an element without border or padding, the margin collapses with the margin of the parent element.
It's the margin of the h1 element that you see at the top. As none of the parents have border or padding, the margin collapses all the way out to the outermost container.
I have a div which I have set to absolute position and z-index above all the other divs on the page. The issue I'm having is where the absolute position div sits is above some divs that are interactive with the users mouse. Is there a way to turn off the interactive state of the absolute positioned div so the divs below are active.
Absolutely positioned elements use the z-index for stacking - which explains why content below is inaccessible. It is, unfortunately, not a case of interactive states, but simply of obstruction.
Any absolutely positioned block elements will obscure elements set below them as far as the dimensions of the uppermost element stretch (set a border on the div to see exactly how far the obstruction is occurring).
Your best bet (within the bounds of css) is to either position the obscuring div below where you need interactivity, or to add the properties of the obscuring div directly to the div being
obscured.
EDIT: i.e. there is no property in CSS to turn an interactive state on or off.
UPDATE 2011/11/11: see https://developer.mozilla.org/en/CSS/pointer-events for a solution to the question. pointer-events: none; is a valid solution to the question.
I have a fixed-width page that I want to add a simple border to with the Border CSS command. However, I don't want this border to balloon the page and cause smaller screens to have a horizontal scrollbar. I'm not too great with CSS, but I know enough that I looked into using negative margins to offset the border's width since I had already done something similar to add borders to other elements that I don't want moving. But when I do so on my main container div, everything gets thrown off-center and smashed up to the left side of the page. I'm using the Blueprint CSS framework and I figured there was something in there that was messing with my margins, and I found the main container is applied a "Margin: 0 auto;" to center it on the page.
So, I ask now, how the hell can I apply a negative-margin border to a page while still centering the layout on-screen? I've tried to wrap the container in a div and apply the border and negative-margin to it, but no dice, I tried nesting a div inside the container and applying the border to the container, but that went badly as well. Somebody throw me a bone here!
If the negative margin is working, you can get the centering back by adding a wrapper div with a fixed width and margin: 0 auto.
In my testing, the negative margin didn't change the width of the box. A few other strategies:
Adjust the width of your div to offset the width added by the borders.
Add a background image to the div that simulates left and right borders.
Use JavaScript to detect the width of the window and remove the border when necessary.
Add body { overflow-x: hidden } to suppress the horizontal scrollbar.
Use a CSS3 media query to add the border only when there's enough room (optionally falling back to JavaScript (see #3) for older browsers).
Update: Instead of negative margins, you can probably use box-sizing: border-box so that the border doesn't add to the element's width in the first place.