This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 3 years ago.
I am trying to put a button on top of 4 blocks. Those blocks are inside divs with style display:flex.
But the z-index style is not working on the button. Alse, if I give positive but less than the button z-index to the blocks, the button hides under all the blocks.
I know I can give negative z-index to the blocks, but in my project it will cause other problem. So I am wondering what's the best way to style them.
.block{
flex:1;
padding: 10px;
border: 2px solid #666999;
margin: 0 10px 10px 0;
}
#btn_box{
margin-top: -20px;
margin-bottom:-15px;
z-index: 999;
text-align: center;
}
#btn_box a{
display: inline-block;
background: #ff9999;
padding: 5px 10px;
}
#btn_box + div{
z-index: 1;
}
<div style='position:relative;'>
<div style='display:flex;'>
<div class='block'>1</div>
<div class='block'>2</div>
</div>
<div id='btn_box'>
<a>TestButton</a>
</div>
<div style='display:flex;'>
<div class='block'>3</div>
<div class='block'>4</div>
</div>
</div>
See also here:
https://jsfiddle.net/w4o8afts/
I have a workaround by making the button box a flex div, but it feels strange to do so.
Add position:relative
#btn_box{
position:relative;
margin-top: -20px;
margin-bottom:-15px;
z-index: 999;
text-align: center;
}
Related
I have a div and inside of this div is text and this text overflows horizontally and I want to stop that.
Unfortunately, this is a little bit more complicated than it first sounds, because I want to create a div that has two columns and I want the right column to be 30px less wide than the left one.
I know I can solve this by creating two divs, but it would be really cool if there is a way to do this with one div. I was more or less able to do this by working with a parent- and child-element and adding margin-right: -30px; to the child, but unfortunately this margin, even though it is there, seems to collapse into the child and the text complete ignores it.
It would save me quite some work if I could figure this out, any ideas?
Fiddle: https://jsfiddle.net/qxnc3fts/3/
-> GOAL: Make it so that the text does not overflow out of the lightgrey div.
Edit: There is a similar question: Is there a way to specify different widths for columns in CSS3?, and there's a great answer there by #Quentin that definitely helped me but that answer does not make the text break and I would like that to happen. – But it seems like that's impossible. At least in the current CSS-version.
.ref {
width: 200px;
height: 10px;
background-color: black;
}
.parent {
background-color: lightgrey;
width: 400px;
}
.child {
column-count: 2;
column-gap: 30px;
margin-right: -30px;
}
<div class="ref"></div>
<div class="parent">
<div class="child">
i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i
</div>
</div>
Your setting the box as an absolute width and the content no-overflow.
Here's a working solution:
.ref {
width: 200px;
height: 10px;
background-color: black;
}
.parent {
background-color: lightgrey;
width: 400px;
}
.child {
column-count: 2;
column-gap: 3.5%;
margin-right: -30px;
overflow-x: auto, hidden;
padding: 8px 30px;
word-break: keep-all;
display: inline-block;
text-align: center;
}
<div class="ref"></div>
<div class="parent">
<div class="child">
i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i
</div>
</div>
If we place 3 x 3 inline-block elements together, we know their borders will touch each other and "double up":
span {
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
border: 3px dotted #999;
font: 42px Arial;
line-height: 60px;
}
<div>
<span>1</span><span>2</span><span>3</span>
</div>
<div>
<span>4</span><span>5</span><span>6</span>
</div>
<div>
<span>7</span><span>8</span><span>9</span>
</div>
If we don't use a table to do it, some developers using a margin-top and margin-left to fix it:
margin-top: -3px;
margin-left: -3px;
span {
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
border: 3px dotted #999;
font: 42px Arial;
line-height: 60px;
margin-top: -3px;
margin-left: -3px;
}
<div>
<span>1</span><span>2</span><span>3</span>
</div>
<div>
<span>4</span><span>5</span><span>6</span>
</div>
<div>
<span>7</span><span>8</span><span>9</span>
</div>
The effect with border being 1px:
span {
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
border: 1px dotted #999;
font: 42px Arial;
line-height: 60px;
margin-top: -1px;
margin-left: -1px;
}
<div>
<span>1</span><span>2</span><span>3</span>
</div>
<div>
<span>4</span><span>5</span><span>6</span>
</div>
<div>
<span>7</span><span>8</span><span>9</span>
</div>
But we also know a negative margin "moves the element", similar to
position: relative; top: -3px; left: -3px
And if the borders "double up", moving every element "relatively" is not going to fix it, supposedly. So how does negative margin make it work? Can the claim be substantiated by CSS specs.
You mentioned the following code:
position: relative;
top: -3px;
left: -3px;
top: -3px; moves each element up by 3px.
left: -3px; moves each element left by 3px.
The code therefore won't solve your problem because all elements are shifted – the whole grid moves to the top left, and borders still double up.
margin: -3px; is something different. It positions each box normally, but as if they were all was 3px smaller on each side.
This means each box moves closer to the element adjacent to it, and borders no longer double up.
margin affect the layout while top/left only move the element from its normal flow position without affecting the layout.
Here is a basic example to understand the difference:
.box {
height:50px;
background:red;
border:2px solid;
}
<div class="box"></div>
<div class="box" style="margin-top:-50px;"></div>
<div class="box"></div>
Notice how we shift the second element and the third follow it.
Now let's use top
.box {
height:50px;
background:red;
border:2px solid;
}
<div class="box"></div>
<div class="box" style="top:-50px;position:relative"></div>
<div class="box"></div>
The third will not move. top will simply affect the concerned element
From the specification:
relative
The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.
For the margin I guess it's more trivial since margin is a part of the box model like defined here. You won't find an explicit sentence saying how negative margin behaves but following its logic we can understand that negative margin will affect the box of the concerned element and will affect the adjacent elements.
So negative margin doesn't really move the element the same way as top/left.
This question already has answers here:
Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
(5 answers)
Why does margin-top work with inline-block but not with inline?
(3 answers)
Closed 3 years ago.
This may be basic but i read in a book that to center something inside a div you should :
margin-left: auto;
margin-right: auto;
width:70%;
so you give it a width and set auto margin.
With button it will not work and I also need to add this to make it work :
display: block;
Why in this case we need it block ?
inline/inline-block elements can't have auto value for margin.
If you want to center button without making it a block, you can use text-align: center on it's parent.
Also, button don't have to be a block if it's being centered by a flex/grid parent.
I added a few examples below.
.wrapper-center {
padding: 20px;
border: 1px solid blue;
text-align: center;
}
/* ----- */
.wrapper {
padding: 20px;
margin-top: 20px;
border: 1px solid red;
}
.centered-button {
display: block;
margin: 0 auto;
}
/* ----- */
.flex-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
padding: 20px;
border: 1px solid green;
}
<div class="wrapper-center">
<button>Test</button>
</div>
<div class="wrapper">
<button class="centered-button">Test</button>
</div>
<div class="flex-wrapper">
<button>Test</button>
</div>
Display: block
This gives the section or div a whole part of the page to itself, starting from what is essentially a new line and taking up the width of the page. Margin and width statement only affect it because of this. Inline or otherwise don’t have this property requirement due to the fact that their properties become relative to other elements on the same line
I'm trying to render column header text vertically, so the columns are narrow. I cannot seem to get the text to rotate and stay within the div.
I've made a quick jsfiddle.
https://jsfiddle.net/DaveC426914/w674sLbL/9/
My "pre-problem" is that my demo is not rendering correctly.
It's repeating the data three times i.e. three 17s, three 18 and three 19s. I don't know why.
(The barebones Angular fiddle I started from did not contain a div ng-app="myApp" so I had to add it or the angular is never applied. I thought maybe that had something to do with it, but remving this div breaks the app.)
Once I fix that, my real problem is that I can't get the text to behave. It should fall within the 100px tall, 20px narrow boxes that should be flush against each other, so that he columns are only 20px or so wide. They are rendering 100px wide.
<div class="table-header-cell" ng-repeat="item in headerDates">
{{item.date}}
</div>
.table-header-cell {
display: inline-block;
border: 1px solid grey;
margin: 1px 1px 5px;
height: 30px;
transform: rotate(-90deg);
transform-origin: left bottom;
width: 100px;
}
I've tried variants of nesting a div within a div, and applying the rotation to outer or inner divs. I've also tried setting width to 100px and height to 20px in the hopes that it applies the dimensioning before the rotation, but so far no combination has worked.
Try wrapping the text in an internal div and apply transforming and margin properties to that instead of all width and rotation on a single div.
Use the following html:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="table-header-cell" ng-repeat="item in headerDates">
<div class="innertext">
{{item.date}}
</div>
</div>
</div>
</div>
and the css:
.table-header-cell {
display: inline-block;
border: 1px solid grey;
margin: 1px 1px 5px;
width: 30px;
height:90px;
}
.table-header-cell .innertext {
transform: rotate(-90deg);
width: 150px;
margin: 0 -60px;
}
This should give you the results your looking for hopefully.
If this helps please mark the answer and vote it. Thanks
For the angular ng-repeat issue, you need to make sure your load type is "No wrap in Body" for your JavaScript, also you were loading Angular twice so I removed the second load.
And for the rotation, you should not rotate the container, but create an inner container and rotate on that.
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="table-header-cell" ng-repeat="item in headerDates">
<div class="cell">
{{item.date}}
</div>
</div>
</div>
</div>
.table-header-cell {
display: inline-block;
border: 1px solid grey;
margin: 1px 1px 5px;
height: 100px;
width: 30px;
}
.cell {
transform: rotate(-90deg);
margin-left: -30px;
margin-top: 30px;
width: 100px;
}
Here is the corrected fiddle: https://jsfiddle.net/w674sLbL/10/
Hope this helps.
This question already has answers here:
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 9 years ago.
how can my containing div (boxes_blue) recognize the height of the items within?
#boxes_blue {
display: block;
margin: 0 0 0 175px;
border: 1px solid brown;
clear: both;
}
#boxes_blue_each {
float: right;
height: 100px;
width: 100px;
padding: 10px;
border-left: 3px solid #fff;
background-color: #004964;
color: #fffacf;
text-transform: uppercase;
text-align: left;
}
<div id="boxes_blue">
<div id="boxes_blue_each">one</div>
<div id="boxes_blue_each">two two</div>
<div id="boxes_blue_each">three three three</div>
<div id="boxes_blue_each">four four four four</div>
</div>
This is happening because the divs that are contained all floated.
I am not sure why this is the way it is, but I know of a few solutions. Either set the containing div to have "overflow:hidden", or add another div below the floated divs with "clear:both". You could also, of course, set the height and width of the containing div as well.