A text link on left-top and another text link on right top over 3 column link which are in the bottom layer

HTML & CSS
4

As mentioned in your other thread (to which you haven’t replied or acknowledged yet) it would be better to use position:sticky instead of position:fixed these days.

You can position the three anchors at the top quite easily without a table or without nesting divs inside the empty anchors.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
}
.top {
	position:fixed;
	pasition:-webkit-sticky;
	position:sticky;
	top:0;
	left:0;
	width:100%;
}
.row {
	display:flex;
	background:yellow;
}
.row > a {
	flex:1 0 33%;
	max-width:33.33333%;
	min-height:30px;
	background:cyan;
	margin:1px;
}
.row a:nth-child(2) {
	background:yellow;
}
</style>
</head>

<body>
<div class="top">
  <div class="row">
  	<a href="http://yahoo.com"></a>
   	<a href="http://google.com"></a>
  	<a href="http://sitepoint.com"></a>
  </div>
</div>

<p>Start following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
</body>
</html>

I’m guessing that this is just a learning exercise as you don’t really want empty anchors leading to somewhere that no one knows. Indeed that may be considered a risky behaviour and should be avoided.

If its a learning exercise then all well and good :slight_smile:

As Erik said above it’s unclear where you want the second row but it sounds like you want it to cover the first row which again is very odd behaviour unless you are just practising?

2 Likes