CODEWITHSUNDEEP
htmlcss
Sophie McCarrell
Sophie McCarrell

Reputation: 2871

Is there CSS which can allow an element to follow flow, while a child has position:absolute?

Is there CSS which can allow an element to follow flow (similar to position:inline), while a child to the element has position:absolute?

EDIT: the answer is yes, just use inline and position absolute. I had a different issue than the one I posted. My apologies. My issue was that using margin:auto made the item centred, but gave all margins 0 rather than the maximum amount (ie. the container would spread as far as it could and the border would generally touch the border of the parent element). To solve the issue I'll be using an additional container and text-align.

Thanks to the people who helped and read this question.

Ignore the following historic portion of the post.

Obviously I want the position absolute to be positioned relative to the bounds of it's parents (so the parent would not have position:static).

Still I am unsure how to do this. Does CSS even have the expressive power to do this?

Think of having a picture in the middle of a paragraph, but instead of an image, it's a container with more elements inside.

Upvotes: 0

Views: 93

Answers (2)

Will Reese
Will Reese

Reputation: 2841

Basically what you are looking for is position:relative;

Position relative retains the normal flow position but allows coordinate modifications. Using the css values top and left, for example will move the object relative to where it should normally be placed. If you nest the object inside a div, it will use the div's top left corner as the 0,0 coordinate origin.

Keep in mind that the position:relative property is applied to the elements inside your parent container and not the parent itself. You can use static or whatever you'd like for the parent. However, the parent won't necessarily resize to encapsulate its relatively positioned children visually, so you will have to set height and width values yourself.

<style type="text/css">
    #my_button {
        position:relative;
        top:10px;
        left:10px
    }
    #my_div {
        height:25px;
        background-color:yellow
    }
</style>

<div id="my_div">
    <input type="button" value="OK" id="my_button"></input>
</div>

Upvotes: 1

Gerben
Gerben

Reputation: 16825

Use position:relative; That way the parent stays in the same location but child elements with position: absolute are positioned relative to the parent not the body.

Upvotes: 0

Related Questions