azusa-tomita/index.html

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
<style id="jsbin-css">
* {
  margin: 0;
  padding: 0;
  border: 0;
}

.link{
    display:block;
    background:gray;
    height:100px;
}
.link a{
    display:inline-block;
    width:100px;
    height:100px;
    background:red;
}


.fixed {
    position: fixed;
    left: 0;
    top: 300px;
    z-index: 100;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    text-align: center;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 1;
}

.fixed p{
    background:tomato;
    margin:50px;
}
.fixed p a{
    display:block;
}
</style>
</head>
<body>


  <h1>iosでリンクの上に重なったfixd要素がwidth:auto;だと背面のリンクが反応する</h1>
<div class="link">
    <a href="#" onclick="alert('aaa')">aaa</a>
</div>


<div class="fixed"><p><a href="#" onclick="alert('bbb')">bbb</a></p></div>


<script id="jsbin-source-css" type="text/css">* {
  margin: 0;
  padding: 0;
  border: 0;
}

.link{
    display:block;
    background:gray;
    height:100px;
}
.link a{
    display:inline-block;
    width:100px;
    height:100px;
    background:red;
}


.fixed {
    position: fixed;
    left: 0;
    top: 300px;
    z-index: 100;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    text-align: center;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 1;
}

.fixed p{
    background:tomato;
    margin:50px;
}
.fixed p a{
    display:block;
}

</script>
</body>
</html>

## jsbin.ziwiluw.css
* {
  margin: 0;
  padding: 0;
  border: 0;
}

.link{
    display:block;
    background:gray;
    height:100px;
}
.link a{
    display:inline-block;
    width:100px;
    height:100px;
    background:red;
}


.fixed {
    position: fixed;
    left: 0;
    top: 300px;
    z-index: 100;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    text-align: center;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 1;
}

.fixed p{
    background:tomato;
    margin:50px;
}
.fixed p a{
    display:block;
}
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style id="jsbin-css">
	* {
	margin: 0;
	padding: 0;
	border: 0;
	}

	.link{
	display:block;
	background:gray;
	height:100px;
	}
	.link a{
	display:inline-block;
	width:100px;
	height:100px;
	background:red;
	}



	.fixed {
	position: fixed;
	left: 0;
	top: 300px;
	z-index: 100;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.95);
	text-align: center;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	opacity: 1;
	}

	.fixed p{
	background:tomato;
	margin:50px;
	}
	.fixed p a{
	display:block;
	}
	</style>
	</head>
	<body>


	<h1>iosでリンクの上に重なったfixd要素がwidth:auto;だと背面のリンクが反応する</h1>
	<div class="link">
	<a href="#" onclick="alert('aaa')">aaa</a>
	</div>



	<div class="fixed"><p><a href="#" onclick="alert('bbb')">bbb</a></p></div>




	<script id="jsbin-source-css" type="text/css">* {
	margin: 0;
	padding: 0;
	border: 0;
	}

	.link{
	display:block;
	background:gray;
	height:100px;
	}
	.link a{
	display:inline-block;
	width:100px;
	height:100px;
	background:red;
	}



	.fixed {
	position: fixed;
	left: 0;
	top: 300px;
	z-index: 100;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.95);
	text-align: center;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	opacity: 1;
	}

	.fixed p{
	background:tomato;
	margin:50px;
	}
	.fixed p a{
	display:block;
	}

	</script>
	</body>
	</html>