CODEWITHSUNDEEP
htmlcssmargin
Yuri Nko
Yuri Nko

Reputation: 71

Parrent element negative margin and child element seems to collabs

Greetings

I have serius problem, I need to move div in div in a div, but it doesn't work. My question is if there couldn't be some problems with negative margins or child element of element with margin problem.

It seems negative margin is collapsing with positive margin in child element.

The margin of child element is moving parrent element.

here is fiddle of my problem.

What I want to achieve is that:

a. Article div is overlaping main heading, I tried to avoid using absolute position, so I went for negative margin.

b. Text is margined inside of an article div. From top.

<div class="container">
    <div class="main-heading"><h1>Main Heading</h1></div>
    <div class="wraper">
        <div class="article">
            <div class="text"><p>Text</p></div>
        </div>
    </div>
</div>

Also here is some of problem in css:

div {
    width: 100%;
}
.container {
}
.heading {
}
.wraper {
    margin-top: -100px;
    height: 500px;
}
.article {
    margin-top: 0;
    height: 200px;
}
.text {
    margin-top: 120px;
    height: 50px;
}

As I said, margin of text element seems to move article element from top as well. It's me or where is the problem, and what's the solution or workaraund? Preferably even without absolute position, but if you really need to use them, don't worry, but clear it somehow so it can be used as part of column and wont interact with upper/bottom content.

Thank you verry much for your time

edit: picture of what I want to achieve

That black rectangle is wrapper, cat is article text is text, but the margins move whole article now.

Upvotes: 0

Views: 360

Answers (2)

Yuri Nko
Yuri Nko

Reputation: 71

I found a related toppic on this, it happens in all mayor browsers, and there is a simple solution on that. There is a must to use overflow attribute in CSS...

I used 

overflow: auto;

On parrent element, and it worked.

Upvotes: 1

Claire
Claire

Reputation: 3184

Based on your comment and what I think you're asking:

<div class="image">
  <p>PRESTO</p>
</div>

.image {
  display:block;
  position:relative;
  background-color:grey;
  width:300px;
  height:200px;
}
p {
  display:none;
  position:absolute;
  top:0;
  width:100%;
  text-align:center;
  color:orange;
  font-size:2em;
}
.image:hover > p {
  display:block;
}

FIDDLE:

https://jsfiddle.net/su5aqs3p/2/

Upvotes: 0

Related Questions