Elements with same atttributes are differenly positioned on my page

HTML & CSS
1

Hi everyone,
My page contains 2 elements with identical attributes’ values but they are differently positioned on the page !
My code:

<!doctype>
<html>
<head>
<style>
<style type="text/css">
	{
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	.first {position: relative;border:1px solid red; width:70%; max-width:70%; height: 50%; max-height:50%; margin-left:15%;top:30%;}
	.second {position: absolute;border:1px solid green; width:70%; max-width:70%; height: 50%; max-height:50%; margin-left:15%;top:30%;}
</style>
</head>
<body>
<p class = "first">abcd</p>
<p class = "second">abcd</p>
</body>
</html>

This is what the page looks like:

1275×717 7.95 KB

Could anyone help me positioning the second element so it will overlap the first?

2

I just have a stupid question. Is there a reason you not using CSS typography styles? I would think it would be much easier to do it that way if you’re trying to manipulate type.

1 Like
3

Hi deotpit!

There’s a subtle difference in how position: relative and position: absolute “handles” their content that “pushes” the .second block to another “starting point” in your sample code.

Using position; absolute in both .first and .second paragraph classes would make the paragraphs overlap completely in your sample code.

Here’s a codepen showing this: http://codepen.io/jarvklo/pen/mAArOW

3 Likes
4

I believe you meant to add the universal selector here:

* {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}

That will probably make your code work in most browsers and put both elements on top of each other.

If you let us know what you are trying to do may be we can suggest a better way to do it as the above code is nonsense really in terms of how web pages are normally laid out.

You also have 2 style tags in your html:

<style>
<style type="text/css">

Get rid of one of those.:slight_smile:

1 Like
5

The position “attributes” (css properties) are not identical. As @jarvklo mentioned there is a difference here, the “.first” refers its position to its own place in the flow but the “.second” is taken out of the flow and refers its position to the viewport.

Add the universal selector @PaulOB assumed and you will see that the “.first” was affected by the page’s margin/padding but the".second was not.

See this thread for more info: dCode_Understanding CSS Positioning

2 Likes
6

Thanks Paul
I’m trying to have table’s header separated from its content so when I scroll it the title remains fixed
I did use your example which worked fine but unfortunately other things didn’nt work for me when I tried to changed titles’ color for example . I found your example too complicated for me to handle.
I want header (titles) and footer (totals) to remain fixed while table’s content is scrolled.
I try to use 2 tables: one with title and footer only, fixed at one place at the screen and another: only data that scrolls at the limits of its’ parent which is beneath title and above footer.
Thanks for you help

7

Thanks a lot jarvklo.
I’m grateful for the code you added.

8

Thanks !

9

The problem with any approach where you split the headers into a separate table means that that you have to have fixed width columns otherwise the headers won’t keep track with the data (unlike my method).

If indeed fixed column widths are ok then you can actually create the scrollable effect all within a single semantic table.

Here’s a demo:

As I said the drawback is that column widths must be the same.

2 Likes
10

I’m too stupid to understand why changing: font-size = 0% solved my problem.
0 font size closed the gap between 1 st paragraph to top screen line but I have no intention to work with font size 0 :slight_smile: people will think I’m stupid…

11

Very kind of you to divert me to this demo.
At bottom line, I’ll need a fixed title so maybe this time I start making some progress.
Its ok if my table is rigid. I need to show much data and titles must be displayed constantly as well as totlas at the bottom of the table. Like in an Excel page where you freeze certain lines.
I’m truely grateful for your assistence.

12

That’s what my codepen does. It fixes the table head and table foot in place while the tbody scrolls. It should satisfy your needs:)

1 Like
13

Thank you very much PaolOB.
You were very very helpful when your assitence came in moments of despararion when I found that my way of thinking doesn’t correspond to CSS ratio …

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.