This question already has answers here:
Setting the width of inline elements
(7 answers)
Closed 2 years ago.
i try toput diplay inline in relative positioned element heres the code
.parent{
height: 50px;
width: 130px;
background-color: red;
top: 100px;
position: relative;
display: inline;
}
but it just disappear
my question is why it do and what the relation between position and display
There is no connection between position and display. But, in your case. Change display: inline; to display: inline-block;, and the element will appear. Displayd inline element can ignore width and height and will be invisible without content.
Related
This question already has answers here:
Fixed position Div ALWAYS appear on top?
(5 answers)
Closed 2 years ago.
I want a header throughout the page when I scroll so I use a header position as fixed.
.header-title{
letter-spacing: 0.2em;
display: flex;
align-items: center;
height: 10vh;
width: 100%;
position: fixed;
background: white;
}
I have used an image on my page with some text on it:
So I used position absolute.
.bottom-left{
position: absolute;
top: 5px;
left: 5px;
background: black;
color: white;
padding: 5px;
font-size: 19px;
}
When I scroll up the fixed position is overridden by absolute:
Actual page:
Doubt image:
The above picture shows the fixed position is overridden by absolute
When you set position:fixed on your header, this means it has come out of the normal flow of execution.
With this some of your page's content is available but behind the header itself. so a margin-top equal to the header height on the element after header will fix it.
You can also use a z-index:10 ( a value more that the position:absolute div) to make it come on top of the page.
Coming to your second part of the question that fixed is changed to absolute. I don't see that happening here.
This question already has answers here:
How to blur(css) div without blur child element [duplicate]
(4 answers)
making css not affect children
(4 answers)
Closed 3 years ago.
I wonder if there is any way to set properties to an element but not its children.
E.g
<div>
<span>A child</span>
</div>
That the span child will not get affected.
So if I want to for example give the div a blur filter and don't want to affect the children of the element, how do I do it?
CSS is hierarchical; any attribute applied to a parent is automatically inherited by the child:
The only way to give a parent an attribute while simultaneously excluding the child is to additionally give the child an attribute that overrides the parent (with higher specificity):
This is best done with the initial value (which 'resets') the value, though you can use any other value you like:
div {
color: red;
}
div > span {
color: initial;
}
<div>Parent
<span>A child</span>
</div>
You could set the required property on the element you want to affect, then select the children of this element and unset the same property or give it a different value.
Does this answer your question?
Not if you target the div (in this case) directly, then the span is force-blurred as well.
But, you could fake the div with a pseudo element, perhaps something like this:
div {
width: 200px;
height: 200px;
position: relative;
}
/* A fake box with the same dimensions as the div */
div::before {
content: "";
background: red;
display: block;
filter: blur(10px);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
span {
position: relative; /* Z-index purposes */
}
<div>
<span>I'm not blurry :D</span>
</div>
you can give separate classes to them and specify options separately in css.
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 3 years ago.
My CSS code has two squares, green (small, child) and red (big, parent). I want to hide the lower half of small box under big box so that no overlap is visible.
My following code doesn't work but if I remove z-index on the red box, it works.
I can't understand this behaviour. As per my understanding, any -ve z-index on the child will take it below the parent no matter what the z-index on the parent is.
Is it incorrect?
.parent {
background:red;
height: 100px;
width: 100px;
position: absolute;
z-index:1;/*comment this line to make it working*/
}
.child {
height: 10px;
width: 10px;
position:absolute;
background:green;
top: 0%;
left: 50%;
transform: translateY(-50%);
z-index: -1;
}
<div class="parent">
<div class="child"></div>
</div>
Expected result:
By giving the parent element a z-index of its own you establish a new stacking context.
This causes the z-index of the child to be scoped to inside the parent instead of scoped to the html element.
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Vertically align text next to an image?
(26 answers)
Flexbox: center horizontally and vertically
(14 answers)
How do I vertically align text in a div?
(34 answers)
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 4 years ago.
I am trying to center align a span inside a div, which also contains an img element.
.element {
display: inline-block;
}
.element img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-right: 20px;
}
.element span {
display: inline-block;
}
<div class="element">
<img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<span>hello</span>
</div>
or see this fiddle
However the text wont vertical align. I have looked primary at this question. However vertical-align: middle does nothing here.
I also looked at this question. However I will rather avoid anything position: relative & position: absolute workarounds for this. I also tried messing the line-height with no luck.
I even tried to set height: 100%on the span, as this question suggests, but that does nothing either.
I basically looked at bunch of questions here on SO, it seems like css is so weird about this, that there basically is 12 approaches for a simple thing like this. Yet I can't seem to get 1 of them to work in my occasion.
What is up with this behavior?
EDIT:
Marked as duplicate to How to Vertical align elements in a div? - I have explained that these solutions with line-height and vertical align doesn't work in my case as explained in the original question. The accepted solution did not work in this case. How is it a duplicate?
The answer here is probably to use flexbox. If your flex-direction is row (which is default), you can use align-items to center the elements vertically and justify-content to justify the row to the left (the "start" of the flex container). Let me know if you have any questions!
.element {
align-items: center;
display: flex;
justify-content: flex-start;
}
.element img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-right: 20px;
}
.element span {
display: inline-block;
}
<div class="element">
<img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<span>hello</span>
</div>
Use flexbox for this. Sample:
.element {
display: flex;
align-items: center;
}
Use align-items: center for vertical align and justify-content: center; if you need also horizontal align center.
This question already has answers here:
How can I horizontally center an element?
(133 answers)
CSS center display inline block?
(9 answers)
Closed 4 years ago.
I was wondering how I can center inline-blocks. Any help?
I tried doing margin-top: x em; but all it did was have the image go down. This inline-block is deliberately inside an image block. If you have links that show me how to position inline-blocks, I will gladly take them into consideration, as I am still learning how to do CSS and HTML.
#img-banner article {
border: solid thick white;
box-sizing: border-box;
display: inline-block;
width: 14em;
position: static;
}
#img-banner h1 {
font-family: 'Lobster', cursive;
text-align: center;
color: white;
font-size: 27px;
}
<span id="img-banner">
<article>
<h1>Introduction</h1>
</article>
</span>
It would be important that you include the properties of the containing span as this is the parent you need to align on. Assuming you want to vertically center your element, you need to ask yourself if the height of your containing element is known and that will guide you towards the proper centering technique.
https://css-tricks.com/centering-css-complete-guide/
You will find alot of common centering techniques on this website. You can consider your inline-block element as a block-level element.
Personally, I like making sure my container is position:relative and then add top:50%; transform: translateY(-50%) to my unknown height positioned elements.
Edit : As noted in your comments, this HTML is invalid. Only inline elements are allowed in a span. I don't know why I overlooked this.