I have a project that hides and shows elements using the visibility parameter. Another element is pushing the text in these elements down and I need to know if there is a way to force the text back to the top of its element. I have tried different display parameters, floats, etc and haven't found anything (other than absolute position) that will work. The problem with absolute positioning is that the container div will then hide overflow instead of expanding with the content. JSFiddle
check JSFiddle for example and code
The problem you are having is the relative position of the list:
#list {
position: relative;
left: -25%;
}
If you switch to using margin-left instead of left, you get the layout you want:
#list {
margin-left: -25%;
}
http://jsfiddle.net/TL969/2/
With relative positioning, surrounding elements are not affected by adjustments. Surrounding elements are layed out as though no adjustments were made to the positioning. By positioning it with negative margin instead, surrounding elements are affected, and thus you free up room for the text.
Related
So the question is...
Good css rules:
We have to set top/right or bottom/right or top/left or bottom/left for position: absolute.
instead of margin...
But do we have to set thouse positions for css ::after or ::before??
Pseudo-classes always goes after or before the element.
If, so.. how to reach expecting output like that:
$(function(){
$('span').on('click',function(){
$(this).parent().append(' extra text ');
})
})
.test__block{
width:200px;
margin:20px;
border:2px solid;
position:relative;
}
#blue{
border-color:blue;}
#red{
border-color:red}
span{
cursor:pointer;
font-weight:800}
#blue:after {
content: "+";
font-size:16px;
position: absolute;
margin-left: 0;
margin-top: -4px;
color:orange;
}
#red:after {
content: "+";
font-size:16px;
position: absolute;
left: 80px;
top: 30px;
color:orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='blue' class='test__block'>Blue text with after element, position set to absolute and top/left, <span>add</span></div>
<div id='red' class='test__block'>Red text with after element, position set to absolute and margin, <span>add</span></div>
So, if you press add button you will see how '+' react with component.
Expecting effect is a blue container.
So what is a propper way to do that? It is only a example. The thing is i will not add text but text will have diferent dimension on each component, so adding different position to after element each time will be pointless? or maybe someday content will change and i will have to set thouse each time?
What if i will have to set thouse for 100? or 1 000 comonents?
Any clue?!
::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is.
::before is exactly the same only it inserts the content before any other content in the HTML instead of after. The only reasons to use one over the other are:
You want the generated content to come before the element content,
positionally.
The ::after content is also "after" in source-order, so it will
position on top of ::before if stacked on top of each other naturally.
The other thing you concern about is the position of it. Try to make $(this).parent().append(' extra text '); to $(this).parent().append(' extra text extra text extra text extra text extra text');. The + will remain in the same position (according to blue one) and if you click add, it will still be the end of the text. Because when you set margin-left and margin-top values to blue one, you are setting the positions of + on span.
So when you're adding the text to that span element and click add, the text will expand and the + will always come ::AFTER the text with given positions, no matter what. Because of pseudo classes. The vertical and horizontal positions you set on ::after is the position of after the element.
An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset.
Hope it helps :)
You can apply the same position declarations to a pseudo-element as you can to an element:
position: static
position: relative
position: absolute
position: fixed
position: sticky
On the whole, in order to establish complete control over your positioning of the pseudo-element I would suggest it is good practice to apply position: relative to the parent element (if it doesn't already have a non-static position declaration applied to it) and then apply position: absolute and co-ordinates to the child pseudo-element.
I have a main wrapper div with a content div and a button. The button is supposed to go underneath the content div but for some reason it's overlapping with it.
The content div has css:
#groupMembers {
position: absolute;
height: 50%;
width: 90%;
left: 5%;
overflow: scroll;
display: inline-block;
}
and the button has:
button {
display: inline-block;
width: 70%;
left: 15%;
}
I thought since they're both inline-block that they wouldn't overlap, but for some reason they are. I made a JsFiddle to show: http://jsfiddle.net/b5hp6boz/
Can anybody help me get the button to display beneath the content div?
Remove the (extensive) use of absolute positioning.... Change it to position: relative; if necessary. But on many elements even that is not necessary.
Move the button div up to under the <h4>add members</h4> in the HTML where you appear to want it.
Then adjust margins for #DIV_05 and the button.
Fiddle Update or Fiddle Update 2
(Note I merely performed a search to change absolute to relative in your CSS, then adjusted from there.)
By using absolute positioning so extensively you were forcing elements into unnatural positions. Then when it wasn't working out.. you are left wondering why. Let things fall where they naturally want to fall. Change the HTML for overall render order, don't force things with absolute positioning.
Use of absolute position is most commonly used to adjust z-index and make elements not alter positioning of other elements. (like a global float of sorts) It should not be the fall back for positioning everything in any layout.
The problem in your code is that you have given the #DIV_5 the following CSS:
position: absolute;
By giving a HTML element an absolute position it is removed from the normal rendering process by not obtaining any space in the document. That means it is not affecting the position of the following BUTTON_105 element. That's why the button is positioned right underneath the H4_4 element (which is the first element not having an absolute position).
To fix that simply remove the position: absolute; declaration for #DIV_5. (Btw: You should try not to make heavy use of absolute positioning as it can cause further issues.)
Try giving your div tag a higher z-index value.
My actual issue is more complicated, but it boils down to this. How can I use CSS to disallow a relative positioned div to stack on an absolute positioned div.
Example of issue:
<div id="absolute"></div>
<div id="relative"></div>
div{
width: 100px;
height: 100px;
opacity: .5;
}
#absolute{
position: absolute;
background-color: red;
}
#relative{
position: relative;
background-color: blue;
}
Codepen
Is this possible with css? So the relative positioned div would be pushed down or to the side until it is not longer covering the other absolute positioned div. Basically the relative div would act as if the absolute div is relative.
To add a little detail of the nature do the issue:
I have a webpage with an absolutely positioned menu on the top and left. I then have a div in which I am injecting templates (Angular). The issue is that the templates end up under the menus. I have tried to apply a margin or padding, but is is messing up my bootstrap grid. So I was hoping the menu could be treated Iike it was relative in regards to the main div, but still stay in place.
When you use position:absolute, you're telling the browser layout engine that this element is removed from the layout of the page. You are specifying a manual position that will not impact the layout of the page in any way. Thus, you cannot both position it manually and have things layout around it.
You must pick one of the other, either don't use position: absolute so that it will participate in the layout of the page or make everything absolute and manually position things not to overlap.
There are some hybrid approaches where a item can be positioned absolutely in a container and the container itself is relative (not absolute) so that the container participates in the layout of the page and things will lay out around the container (and thus around the absolute positioned element if the container is set to be the right size), but this is really just a technicality as it puts the absolute positioned item into a non-absolute positioned container so it isn't really absolute positioned on the overall page any more.
It sounds like your problem would be solved by separating the elements and applying a float property. However, per your question, when your use the relative property, it allows you to set the position relative to it's parent. If the absolute positioned element is the parent, then your code is incorrect and keeping them separated would be a matter of hard-coding them to maintain a minimum distance from one another. However, it is not the parent then the elements have no relation to each other and you must explicitly define their position in order for them to not interact with each other. But again, it sounds like a situation to apply the float property.
I have multiple Div's that I am using as buttons. If I set the postition to relative I can use float left to put them all on one row next to eachother. They also appear at the top of the parent div. I want the buttons to appear at the bottom of the parent div. Is it possible to give an element two position values as in
position: relative;
float: left;
and also
position: absolute;
bottom: 0;
I have a feeling this is a logic error of some kind and I am not sure how to do this logic.
just put them into wrapper
<style>div.buttons{position:absolute;bottom:0;}</style>
<div class="buttons">...</div>
if float is problem, use display:inline-block; for positioning add position:relative to the parent div, and use position:absolute to child divs.
Please note with display inline-block you need to extra hack for IE7 *display:inline (if you are still supporting it), and if you see white space btw buttons, refer
I tried positioning a div element using margin-bottom. For some reason the margin-bottom doesn't appear to affect the position of the element. I tried searching for an answer, though all answers had something to do with position:absolute, and I still couldn't get it to work.
However, I did manage to position it using a negative margin-top, but I'm still curious to know what causes it not to work.
Heres the fiddle showing the HTML/CSS.
(what I'm talking about is the image. The margin-bottom is set to 100px.)
Try to put the position absolute property in the DIV with the class "productImage". Like this, for example:
.productImage {
display: block;
float: left;
position: absolute;
left: 450px;
top: 60px;
}
Using this i've manipulated the image sucessfully. I hope it can help you.
A margin on the bottom would only work if the element was positioned via bottom somehow. Right now, it's positioned based on its top and that is being set by the H1. If you don't want the H1 to be a block, set it to display:inline-block. You could also set the width to be that of the paragraph.
As you noted, this is why a negative margin-top works.
Use one of the following:
Negative (or simply smaller) margin-top
position: relative and a negative top
Further explanation:
margin-bottom, in normal document flow, will only affect the position of elements that come after it, due to the fact that normal block-level elements will expand their height with the height of their children. Thus, the position of your element is determined by the elements before it, as well as its own margin-top.
Consider adding display: block.